pxd 0.0.64 → 0.1.3

package/dist/components/backtop/index.vue

@@ -1,75 +1,118 @@
 <script setup>
-import ArrowIcon from "@gdsicon/vue/arrow-up";
+import ArrowUpIcon from "@gdsicon/vue/arrow-up";
 import { computed, onBeforeUnmount, onMounted, shallowRef } from "vue";
-import { getScrollContainer, getScrollElByContainer } from "../../utils/dom";
-import { cachedOff, cachedOn } from "../../utils/event";
-import { getCssUnitValue } from "../../utils/format";
+import { useMotionReduced } from "../../composables/use-motion-reduce.js";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { getScrollTarget, getScrollElement, resolveScrollBehavior } from "../../utils/dom.js";
+import { cachedOff, cachedOn, throttleByRaf } from "../../utils/event.js";
 import PButton from "../button/index.vue";
+import PTeleport from "../teleport/index.vue";
 defineOptions({
-  name: "PBacktop",
-  inheritAttrs: false
+	name: "PBacktop",
+	inheritAttrs: false
 });
 const props = defineProps({
-  right: { type: [String, Number], required: false },
-  bottom: { type: [String, Number], required: false },
-  zIndex: { type: [String, Number], required: false },
-  visibleThreshold: { type: Number, required: false, default: 30 }
+	size: {
+		type: String,
+		required: false
+	},
+	appendToBody: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	visibleThreshold: {
+		type: Number,
+		required: false,
+		default: 30
+	},
+	scrollTarget: {
+		type: String,
+		required: false,
+		default: "top"
+	},
+	scrollBehavior: {
+		type: null,
+		required: false,
+		default: "auto"
+	}
 });
+const emits = defineEmits(["click"]);
 let scrollContainer;
 let scrollContainerEl;
 const scrollTop = shallowRef(0);
+const maxScrollTop = shallowRef(0);
+const updateScrollTop = throttleByRaf(() => {
+	if (!scrollContainerEl) {
+		return;
+	}
+	scrollTop.value = scrollContainerEl.scrollTop;
+	maxScrollTop.value = Math.max(0, scrollContainerEl.scrollHeight - scrollContainerEl.clientHeight);
+});
 const wrapperRef = shallowRef();
-const computedStyle = computed(() => {
-  return {
-    zIndex: props.zIndex,
-    right: getCssUnitValue(props.right),
-    bottom: getCssUnitValue(props.bottom)
-  };
+const isVisible = computed(() => {
+	if (props.scrollTarget === "top") {
+		return scrollTop.value >= props.visibleThreshold;
+	}
+	return maxScrollTop.value - scrollTop.value >= props.visibleThreshold;
 });
-function updateScrollTop() {
-  if (!scrollContainerEl) {
-    return;
-  }
-  scrollTop.value = scrollContainerEl.scrollTop;
-}
-function onBacktopClick() {
-  if (!scrollContainer) {
-    return;
-  }
-  scrollContainer.scrollTo({
-    top: 0,
-    left: 0,
-    behavior: "smooth"
-  });
+const { attrs, classes } = useTailwindVariant({
+	base: "pxd-backtop",
+	variants: {
+		appendToBody: {
+			true: "fixed",
+			false: "absolute"
+		},
+		visible: { true: "will-change-transform" }
+	}
+}, { selection: () => ({
+	appendToBody: props.appendToBody,
+	visible: isVisible.value
+}) });
+const motionReduce = useMotionReduced();
+function onActionClick(ev) {
+	emits("click", ev);
+	if (!scrollContainer || !scrollContainerEl) {
+		return;
+	}
+	const top = props.scrollTarget === "bottom" ? Math.max(0, scrollContainerEl.scrollHeight - scrollContainerEl.clientHeight) : 0;
+	scrollContainer.scrollTo({
+		top,
+		left: 0,
+		behavior: resolveScrollBehavior(props.scrollBehavior, motionReduce)
+	});
 }
 onMounted(() => {
-  scrollContainer = getScrollContainer(wrapperRef.value);
-  scrollContainerEl = getScrollElByContainer(scrollContainer);
-  updateScrollTop();
-  cachedOn(scrollContainer, "scroll", updateScrollTop, { passive: true });
+	scrollContainer = getScrollTarget(wrapperRef.value);
+	scrollContainerEl = getScrollElement(scrollContainer);
+	updateScrollTop();
+	cachedOn(scrollContainer, "scroll", updateScrollTop, { passive: true });
 });
 onBeforeUnmount(() => {
-  cachedOff(scrollContainer, "scroll", updateScrollTop, { passive: true });
-  scrollContainer = null;
-  scrollContainerEl = null;
+	cachedOff(scrollContainer, "scroll", updateScrollTop, { passive: true });
+	updateScrollTop.cancel();
+	scrollContainer = null;
+	scrollContainerEl = null;
 });
 </script>
 
 <template>
-  <Transition name="pxd-transition--fade-scale" mode="out-in" appear>
-    <div
-      v-show="scrollTop >= visibleThreshold"
-      ref="wrapperRef"
-      class="right-6 bottom-6 fixed z-10"
-      :style="computedStyle"
-      v-bind="$attrs"
-      @click="onBacktopClick"
-    >
-      <slot>
-        <PButton class="shadow-sm" shape="rounded" icon>
-          <ArrowIcon />
-        </PButton>
-      </slot>
-    </div>
-  </Transition>
+  <PTeleport :disabled="!appendToBody">
+    <Transition name="pxd-transition--fade-scale" mode="out-in" appear>
+      <div
+        data-backtop
+        v-show="isVisible"
+        ref="wrapperRef"
+        :class="classes"
+        v-bind="attrs"
+        @click="onActionClick"
+      >
+        <slot>
+          <PButton :size="size" shape="rounded" icon>
+            <ArrowUpIcon :class="{ 'rotate-180': scrollTarget === 'bottom' }" />
+          </PButton>
+        </slot>
+      </div>
+    </Transition>
+  </PTeleport>
 </template>

package/dist/components/backtop/types.d.ts

@@ -1,6 +1,13 @@
+import type { ComponentSize } from '../../types/shared/props'
+
 export interface BacktopProps {
-  right?: string | number
-  bottom?: string | number
-  zIndex?: string | number
+  size?: ComponentSize
+  appendToBody?: boolean
   visibleThreshold?: number
+  scrollTarget?: 'top' | 'bottom'
+  scrollBehavior?: ScrollBehavior
+}
+
+export interface BacktopEmits {
+  click: [PointerEvent]
 }

package/dist/components/badge/index.d.vue.ts

@@ -1,15 +1,18 @@
 import type { BadgeProps } from './types';
-declare var __VLS_8: {};
+declare var __VLS_7: {}, __VLS_9: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    prefix?: (props: typeof __VLS_7) => any;
+} & {
+    default?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (args_0: Event) => any;
 }, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{
     onClose?: ((args_0: Event) => any) | undefined;
 }>, {
+    as: import("../../types/shared/props.js").ComponentAs;
+    shape: import("../../types/shared/props.js").ComponentShape;
     variant: import("./types").BadgeVariant;
-    as: import("../../types/shared").ComponentAs;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/badge/index.vue

@@ -1,104 +1,151 @@
 <script setup>
 import CrossIcon from "@gdsicon/vue/cross";
-import { tv } from "tailwind-variants";
 import { computed } from "vue";
-import { useConfigProvider } from "../../contexts/config-provider";
+import { createTailwindVariant, useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
 defineOptions({
-  name: "PBadge",
-  inheritAttrs: false
+	name: "PBadge",
+	inheritAttrs: false
 });
 const props = defineProps({
-  as: { type: [String, Object], required: false, default: "span" },
-  href: { type: String, required: false },
-  size: { type: String, required: false },
-  variant: { type: String, required: false, default: "pill" },
-  closeable: { type: Boolean, required: false }
+	as: {
+		type: [String, Object],
+		required: false,
+		default: "span"
+	},
+	size: {
+		type: String,
+		required: false
+	},
+	shape: {
+		type: String,
+		required: false,
+		default: "default"
+	},
+	variant: {
+		type: String,
+		required: false,
+		default: "pill"
+	},
+	closeable: {
+		type: Boolean,
+		required: false
+	}
 });
 const emits = defineEmits(["close"]);
-const badgeVariant = tv({
-  base: "pxd-badge font-medium gap-1 inline-flex items-center justify-center rounded-full font-sans leading-none text-nowrap whitespace-nowrap no-underline! motion-safe:transition-appearance",
-  variants: {
-    variant: {
-      pill: "bg-background-100",
-      primary: "bg-primary text-gray-100",
-      gray: "text-white bg-gray-600",
-      blue: "bg-blue-700 text-gray-100 dark:text-gray-1000",
-      purple: "bg-purple-700 text-gray-100 dark:text-gray-1000",
-      amber: "bg-amber-700 text-gray-1000 dark:text-gray-100",
-      red: "bg-red-700 text-gray-100 dark:text-gray-1000",
-      pink: "bg-pink-700 text-gray-100 dark:text-gray-1000",
-      green: "bg-green-700 text-gray-100 dark:text-gray-1000",
-      teal: "bg-teal-700 text-gray-100 dark:text-gray-1000",
-      "gray-subtle": "bg-gray-200 text-gray-1000",
-      "blue-subtle": "bg-blue-200 text-blue-900",
-      "purple-subtle": "bg-purple-200 text-purple-900",
-      "amber-subtle": "bg-amber-200 text-amber-900",
-      "red-subtle": "bg-red-200 text-red-900",
-      "pink-subtle": "bg-pink-200 text-pink-900",
-      "green-subtle": "bg-green-200 text-green-900",
-      "teal-subtle": "bg-teal-200 text-teal-900",
-      inverted: "bg-gray-1000 text-gray-100",
-      vue: "text-gray-100 dark:text-gray-1000",
-      trial: "text-gray-100 dark:text-gray-1000",
-      turborepo: "text-gray-100 dark:text-gray-1000"
-    },
-    size: {
-      sm: "px-1.5 h-5 text-xs",
-      md: "px-2.5 h-6 text-xs",
-      lg: "px-3 h-8 text-sm"
-    }
-  },
-  compoundVariants: [
-    { variant: "pill", class: "pill" },
-    { variant: "vue", class: "vue" },
-    { variant: "trial", class: "trial" },
-    { variant: "turborepo", class: "turborepo" }
-  ],
-  defaultVariants: {
-    variant: "gray",
-    size: "md"
-  }
+const iconSlotClasses = createTailwindVariant({
+	base: "inline-flex shrink-0 items-center justify-center",
+	variants: {
+		size: {
+			sm: "w-3 h-3 p-0.5 text-11",
+			md: "w-4 h-4 text-xs",
+			lg: "w-5 h-5 text-sm"
+		},
+		slot: {}
+	},
+	compoundVariants: [
+		{
+			size: "sm",
+			slot: "prefix",
+			class: "-ms-0.5"
+		},
+		{
+			size: "md",
+			slot: "prefix",
+			class: "-ms-01"
+		},
+		{
+			size: "lg",
+			slot: "prefix",
+			class: "-ms-1.5"
+		},
+		{
+			size: "sm",
+			slot: "suffix",
+			class: "-me-0.5"
+		},
+		{
+			size: "md",
+			slot: "suffix",
+			class: "-me-1.5"
+		},
+		{
+			size: "lg",
+			slot: "suffix",
+			class: "-me-1.5"
+		}
+	]
 });
 const configProvider = useConfigProvider();
-const computedClasses = computed(() => {
-  const { variant, size = configProvider.size } = props;
-  return badgeVariant({ variant, size });
-});
+const computedSize = computed(() => props.size || configProvider.size);
+const { attrs, classes } = useTailwindVariant({
+	base: "pxd-badge font-medium gap-1 inline-flex items-center justify-center font-sans leading-none text-nowrap whitespace-nowrap no-underline! outline-none text-trim-both motion-safe:transition-appearance",
+	variants: {
+		variant: {
+			pill: "border bg-background-100",
+			primary: "bg-primary text-primary-foreground",
+			secondary: "border border-gray-alpha-300 bg-gray-200 text-gray-1000",
+			gray: "text-white bg-gray-900",
+			blue: "bg-blue-800 text-gray-100 dark:text-gray-1000",
+			purple: "bg-purple-900 text-gray-100 dark:text-gray-1000",
+			amber: "bg-amber-700 text-gray-1000 dark:text-gray-100",
+			red: "bg-red-900 text-gray-100 dark:text-gray-1000",
+			pink: "bg-pink-900 text-gray-100 dark:text-gray-1000",
+			green: "bg-green-900 text-gray-100 dark:text-gray-1000",
+			teal: "bg-teal-900 text-gray-100 dark:text-gray-1000",
+			"gray-subtle": "bg-gray-200 text-gray-1000",
+			"blue-subtle": "bg-blue-200 text-blue-900",
+			"purple-subtle": "bg-purple-200 text-purple-900",
+			"amber-subtle": "bg-amber-200 text-amber-900",
+			"red-subtle": "bg-red-200 text-red-900",
+			"pink-subtle": "bg-pink-200 text-pink-900",
+			"green-subtle": "bg-green-200 text-green-900",
+			"teal-subtle": "bg-teal-200 text-teal-900",
+			inverted: "bg-gray-1000 text-gray-100",
+			vue: "bg-[linear-gradient(315deg,#42d392_25%,#647eff)] text-gray-100 dark:text-gray-1000",
+			trial: "bg-[linear-gradient(135deg,#0070f3,#f81ce5)] text-gray-100 dark:text-gray-1000",
+			turborepo: "bg-[linear-gradient(135deg,#ff1e56,#0096ff)] text-gray-100 dark:text-gray-1000"
+		},
+		shape: {
+			default: "rounded-md",
+			square: "rounded-none",
+			rounded: "rounded-full"
+		},
+		size: {
+			sm: "px-1.5 h-5 text-xs",
+			md: "px-2.5 h-6 text-xs",
+			lg: "px-3 h-8 text-sm"
+		}
+	}
+}, { selection: () => ({
+	variant: props.variant,
+	shape: props.shape,
+	size: computedSize.value
+}) });
 function onClose(ev) {
-  emits("close", ev);
+	emits("close", ev);
 }
 </script>
 
 <template>
-  <Component :is="as" :class="computedClasses" v-bind="$attrs">
+  <Component data-badge :is="as" :class="classes" :data-variant="variant" v-bind="attrs">
+    <span
+      v-if="$slots.prefix"
+      class="pxd-badge--prefix"
+      :class="iconSlotClasses({ size: computedSize, slot: 'prefix' })"
+    >
+      <slot name="prefix" />
+    </span>
+
     <slot />
 
     <button
       v-if="closeable"
-      class="pxd-badge--close p-1 -mr-1 relative cursor-pointer appearance-none rounded-full text-[.75em] self-focus-ring hover:bg-gray-alpha-200 active:bg-gray-alpha-300 motion-safe:transition-colors"
+      class="pxd-badge--close relative cursor-pointer appearance-none rounded-sm text-foreground-secondary self-focus-ring hover:bg-gray-alpha-200 hover:text-foreground active:bg-gray-alpha-300 motion-safe:transition-colors"
+      :class="iconSlotClasses({ size: computedSize, slot: 'suffix' })"
       @click.stop="onClose"
     >
       <CrossIcon class="pointer-events-none" />
     </button>
   </Component>
 </template>
-
-<style lang="postcss">
-.pxd-badge {
-  &.pill {
-    box-shadow: 0 0 0 1px var(--color-gray-300);
-  }
-
-  &.vue {
-    background: linear-gradient(315deg, #42d392 25%, #647eff);
-  }
-
-  &.trial {
-    background: linear-gradient(135deg, #0070f3, #f81ce5);
-  }
-
-  &.turborepo {
-    background: linear-gradient(135deg, #ff1e56, #0096ff);
-  }
-}
-</style>

package/dist/components/badge/types.d.ts

@@ -1,8 +1,9 @@
-import type { ComponentAs, ComponentSize } from '../../types/shared'
+import type { ComponentAs, ComponentShape, ComponentSize } from '../../types/shared/props'
 
 export type BadgeVariant =
   | 'pill'
   | 'primary'
+  | 'secondary'
   | 'gray'
   | 'blue'
   | 'purple'
@@ -26,8 +27,8 @@ export type BadgeVariant =
 
 export interface BadgeProps {
   as?: ComponentAs
-  href?: string
   size?: ComponentSize
+  shape?: ComponentShape
   variant?: BadgeVariant
   closeable?: boolean
 }