pxd 0.0.64 → 0.1.3

package/dist/components/stack/index.vue

@@ -1,110 +1,123 @@
 <script setup>
-import { tv } from "tailwind-variants";
 import { computed } from "vue";
-import { getResponsiveValue } from "../../utils/get";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { getResponsiveValue } from "../../utils/helper.js";
 defineOptions({
-  name: "PStack",
-  inheritAttrs: false
+	name: "PStack",
+	inheritAttrs: false
 });
 const props = defineProps({
-  as: { type: [String, Object], required: false, default: "div" },
-  gap: { type: [String, Number, Object], required: false },
-  wrap: { type: Boolean, required: false, default: true },
-  scale: { type: Number, required: false, default: 4 },
-  align: { type: String, required: false, default: "start" },
-  justify: { type: String, required: false, default: "start" },
-  direction: { type: [String, Object], required: false }
-});
-const stackVariant = tv({
-  base: "pxd-stack flex max-w-full gap-(--xs) [--xs:1rem]",
-  variants: {
-    wrap: {
-      true: "flex-wrap",
-      false: ""
-    },
-    align: {
-      start: "items-start",
-      end: "items-end",
-      center: "items-center",
-      between: "items-between",
-      around: "items-around",
-      evenly: "items-evenly",
-      stretch: "items-stretch"
-    },
-    justify: {
-      start: "flex-start",
-      end: "flex-end",
-      center: "justify-center",
-      between: "justify-between",
-      around: "justify-around",
-      evenly: "justify-evenly",
-      stretch: "justify-stretch"
-    }
-  },
-  defaultVariants: {
-    wrap: true,
-    align: "start",
-    justify: "start"
-  }
+	as: {
+		type: [String, Object],
+		required: false,
+		default: "div"
+	},
+	gap: {
+		type: [
+			String,
+			Number,
+			Object
+		],
+		required: false
+	},
+	wrap: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	scale: {
+		type: Number,
+		required: false,
+		default: 4
+	},
+	align: {
+		type: String,
+		required: false,
+		default: "start"
+	},
+	justify: {
+		type: String,
+		required: false,
+		default: "start"
+	},
+	direction: {
+		type: [String, Object],
+		required: false
+	}
 });
 const presetDir = {
-  "--xs:vertical": "flex-col",
-  "--xs:horizontal": "flex-row",
-  "--sm:vertical": "sm:flex-col",
-  "--sm:horizontal": "sm:flex-row",
-  "--md:vertical": "md:flex-col",
-  "--md:horizontal": "md:flex-row",
-  "--lg:vertical": "lg:flex-col",
-  "--lg:horizontal": "lg:flex-row",
-  "--xl:vertical": "xl:flex-col",
-  "--xl:horizontal": "xl:flex-row"
+	"--xs:vertical": "flex-col",
+	"--xs:horizontal": "flex-row",
+	"--sm:vertical": "sm:flex-col",
+	"--sm:horizontal": "sm:flex-row",
+	"--md:vertical": "md:flex-col",
+	"--md:horizontal": "md:flex-row",
+	"--lg:vertical": "lg:flex-col",
+	"--lg:horizontal": "lg:flex-row",
+	"--xl:vertical": "xl:flex-col",
+	"--xl:horizontal": "xl:flex-row"
 };
 const presetGap = {
-  "--xs": "gap-(--xs)",
-  "--sm": "sm:gap-(--sm)",
-  "--md": "md:gap-(--md)",
-  "--lg": "lg:gap-(--lg)",
-  "--xl": "xl:gap-(--xl)"
+	"--xs": "gap-(--xs)",
+	"--sm": "sm:gap-(--sm)",
+	"--md": "md:gap-(--md)",
+	"--lg": "lg:gap-(--lg)",
+	"--xl": "xl:gap-(--xl)"
 };
 const formattedGap = computed(() => {
-  const { gap, scale } = props;
-  return getResponsiveValue(
-    gap,
-    typeof gap === "object" ? gap.xs : gap,
-    (acc, bp, value) => acc[`--${bp}`] = `${Number(value) * scale}px`
-  );
+	const { gap, scale } = props;
+	return getResponsiveValue(gap, typeof gap === "object" ? gap.xs : gap, (acc, bp, value) => acc[`--${bp}`] = `${Number(value) * scale}px`);
 });
 const formattedDirection = computed(() => {
-  const { direction } = props;
-  return getResponsiveValue(
-    props.direction,
-    (typeof direction === "object" ? direction.xs : direction) ?? "horizontal",
-    (acc, bp, value) => {
-      acc[bp] = presetDir[`--${bp}:${value}`];
-    }
-  );
+	const { direction } = props;
+	return getResponsiveValue(props.direction, (typeof direction === "object" ? direction.xs : direction) ?? "horizontal", (acc, bp, value) => {
+		acc[bp] = presetDir[`--${bp}:${value}`];
+	});
 });
+const { attrs, classes: variantClasses } = useTailwindVariant({
+	base: "pxd-stack flex w-full max-w-full gap-(--xs) [--xs:1rem]",
+	variants: {
+		wrap: { true: "flex-wrap" },
+		align: {
+			start: "items-start",
+			end: "items-end",
+			center: "items-center",
+			between: "items-between",
+			around: "items-around",
+			evenly: "items-evenly",
+			stretch: "items-stretch"
+		},
+		justify: {
+			start: "justify-start",
+			end: "justify-end",
+			center: "justify-center",
+			between: "justify-between",
+			around: "justify-around",
+			evenly: "justify-evenly",
+			stretch: "justify-stretch"
+		}
+	}
+}, { selection: () => ({
+	wrap: props.wrap,
+	align: props.align,
+	justify: props.justify
+}) });
 const computedClasses = computed(() => {
-  const baseClass = stackVariant({
-    wrap: props.wrap,
-    align: props.align,
-    justify: props.justify
-  });
-  const classes = [
-    baseClass,
-    ...Object.values(formattedDirection.value),
-    ...Object.keys(formattedGap.value).map((bp) => presetGap[bp])
-  ].filter(Boolean).join(" ");
-  return classes;
+	const classes = [
+		variantClasses.value,
+		...Object.values(formattedDirection.value),
+		...Object.keys(formattedGap.value).map((bp) => presetGap[bp])
+	].filter(Boolean);
+	return classes;
 });
 </script>
 
 <template>
   <Component
+    data-stack
     :is="props.as"
-    class="pxd-stack flex max-w-full"
     :class="computedClasses"
-    v-bind="$attrs"
+    v-bind="attrs"
     :style="formattedGap"
   >
     <slot />

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

@@ -1,4 +1,4 @@
-import type { ComponentAs, ComponentDirection, ResponsiveValue } from '../../types/shared'
+import type { ComponentAs, ComponentDirection, ResponsiveValue } from '../../types/shared/props'
 
 type Align = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch'
 

package/dist/components/status-dot/index.d.vue.ts

@@ -1,6 +1,6 @@
 import type { StatusDotProps } from './types';
 declare const __VLS_export: import("vue").DefineComponent<StatusDotProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StatusDotProps> & Readonly<{}>, {
-    label: boolean | import("../../types/shared").ComponentLabel;
+    label: string | number | boolean | null;
     state: "QUEUED" | "BUILDING" | "READY" | "ERROR" | "CANCELED";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/status-dot/index.vue

@@ -1,41 +1,55 @@
 <script setup>
-import { capitalize as capitalizeText } from "../../utils/format";
+import { capitalize as capitalizeText } from "../../utils/format.js";
 defineOptions({
-  name: "PStatusDot",
-  inheritAttrs: false
+	name: "PStatusDot",
+	inheritAttrs: false
 });
 const props = defineProps({
-  label: { type: [Boolean, String, Number, Array, null], required: false, default: false },
-  state: { type: String, required: false, default: "QUEUED" }
+	label: {
+		type: [
+			Boolean,
+			String,
+			Number,
+			null
+		],
+		required: false,
+		skipCheck: true,
+		default: false
+	},
+	state: {
+		type: String,
+		required: false,
+		default: "QUEUED"
+	}
 });
 const stateClassNames = {
-  READY: "is-ready bg-teal-600",
-  ERROR: "is-error bg-red-700",
-  QUEUED: "is-queued bg-gray-alpha-200",
-  CANCELED: "is-canceled bg-gray-alpha-400",
-  BUILDING: "is-building bg-amber-600"
+	READY: "is-ready bg-teal-600",
+	ERROR: "is-error bg-red-700",
+	QUEUED: "is-queued bg-gray-alpha-200",
+	CANCELED: "is-canceled bg-gray-alpha-400",
+	BUILDING: "is-building bg-amber-600"
 };
 function getLabelText() {
-  const { label, state } = props;
-  if (!label) {
-    return "";
-  }
-  if (typeof label === "boolean") {
-    return capitalizeText(state);
-  }
-  return label;
+	const { label, state } = props;
+	if (!label) {
+		return "";
+	}
+	if (typeof label === "boolean") {
+		return capitalizeText(state);
+	}
+	return label;
 }
 </script>
 
 <template>
-  <span class="pxd-state-dot inline-flex items-center" v-bind="$attrs">
+  <span data-status-dot class="pxd-state-dot inline-flex items-center" v-bind="$attrs">
     <i
       aria-hidden="true"
       class="w-2.5 h-2.5 inline-block rounded-full"
       :class="stateClassNames[state]"
     />
 
-    <span v-if="label" class="pl-2 pr-1 min-w-0 text-sm truncate after:content-[attr(aria-label)]">
+    <span v-if="label" class="ps-2 pe-1 min-w-0 text-sm truncate after:content-[attr(aria-label)]">
       {{ getLabelText() }}
     </span>
   </span>

package/dist/components/status-dot/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentLabel } from '../../types/shared'
+import type { ComponentLabel } from '../../types/shared/props'
 
 export interface StatusDotProps {
   label?: boolean | ComponentLabel

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

@@ -0,0 +1,28 @@
+import type { StepsOption, StepsProps, StepsStatus } from './types';
+declare var __VLS_10: {
+    index: number;
+    item: StepsOption;
+    status: StepsStatus;
+};
+type __VLS_Slots = {} & {
+    item?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<StepsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (args_0: number) => any;
+    "update:modelValue": (args_0: number) => any;
+}, string, import("vue").PublicProps, Readonly<StepsProps> & Readonly<{
+    onChange?: ((args_0: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: number) => any) | undefined;
+}>, {
+    options: StepsOption[];
+    status: StepsStatus;
+    direction: import("../../types/shared/props.js").ComponentDirection;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/steps/index.vue

@@ -0,0 +1,143 @@
+<script setup>
+import { computed, shallowRef } from "vue";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { getFallbackValue } from "../../utils/helper.js";
+import PStepsItem from "../_internal/step-item.vue";
+defineOptions({
+	name: "PSteps",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
+});
+const props = defineProps({
+	modelValue: {
+		type: Number,
+		required: false
+	},
+	defaultValue: {
+		type: Number,
+		required: false
+	},
+	direction: {
+		type: String,
+		required: false,
+		default: "horizontal"
+	},
+	status: {
+		type: String,
+		required: false,
+		default: "process"
+	},
+	size: {
+		type: String,
+		required: false
+	},
+	clickable: {
+		type: Boolean,
+		required: false
+	},
+	options: {
+		type: Array,
+		required: true,
+		default: () => []
+	}
+});
+const emits = defineEmits(["change", "update:modelValue"]);
+const SIZES = {
+	sm: {
+		indicatorSize: "1.25rem",
+		indicatorFontSize: "0.6875rem",
+		iconSize: "0.75rem",
+		titleFontSize: "0.8125rem",
+		descriptionFontSize: "0.75rem",
+		gap: "0.5rem"
+	},
+	md: {
+		indicatorSize: "1.75rem",
+		indicatorFontSize: "0.8125rem",
+		iconSize: "0.875rem",
+		titleFontSize: "0.875rem",
+		descriptionFontSize: "0.75rem",
+		gap: "0.5rem"
+	},
+	lg: {
+		indicatorSize: "2.25rem",
+		indicatorFontSize: "0.9375rem",
+		iconSize: "1rem",
+		titleFontSize: "1rem",
+		descriptionFontSize: "0.8125rem",
+		gap: "0.5rem"
+	}
+};
+/** Uncontrolled fallback: a bound `modelValue` always wins. */
+const innerValue = shallowRef(props.defaultValue);
+const activeIndex = computed(() => props.modelValue ?? innerValue.value ?? 0);
+const configProvider = useConfigProvider();
+const computedSize = computed(() => getFallbackValue(props.size, SIZES, configProvider.size));
+const computedStyle = computed(() => {
+	const size = computedSize.value;
+	return {
+		"--steps-indicator-size": size.indicatorSize,
+		"--steps-indicator-font-size": size.indicatorFontSize,
+		"--steps-icon-size": size.iconSize,
+		"--steps-title-font-size": size.titleFontSize,
+		"--steps-description-font-size": size.descriptionFontSize,
+		"--steps-gap": size.gap
+	};
+});
+const modelValue = useModelValue(props, emits);
+function resolveStatus(option, index) {
+	if (option.status) {
+		return option.status;
+	}
+	if (index < activeIndex.value) {
+		return "finish";
+	}
+	if (index === activeIndex.value) {
+		return props.status ?? "process";
+	}
+	return "wait";
+}
+function select(index) {
+	const option = props.options[index];
+	if (!props.clickable || !option || option.disabled || index === activeIndex.value) {
+		return;
+	}
+	innerValue.value = index;
+	modelValue.value = index;
+}
+</script>
+
+<template>
+  <div
+    data-steps
+    class="pxd-steps group/steps flex w-full max-w-full data-[direction=vertical]:flex-col"
+    :data-direction="direction"
+    :style="computedStyle"
+    v-bind="$attrs"
+  >
+    <template v-for="(option, index) in options" :key="index">
+      <PStepsItem
+        v-if="$slots.item"
+        :clickable="clickable"
+        :index="index"
+        :option="option"
+        :status="resolveStatus(option, index)"
+        @select="select"
+      >
+        <slot name="item" :index="index" :item="option" :status="resolveStatus(option, index)" />
+      </PStepsItem>
+      <PStepsItem
+        v-else
+        :clickable="clickable"
+        :index="index"
+        :option="option"
+        :status="resolveStatus(option, index)"
+        @select="select"
+      />
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,25 @@
+import type { ComponentDirection, ComponentLabel, ComponentSize } from '../../types/shared/props'
+
+export type StepsStatus = 'process' | 'finish' | 'error' | 'wait'
+
+export interface StepsOption {
+  title?: ComponentLabel
+  description?: ComponentLabel
+  status?: StepsStatus
+  disabled?: boolean
+}
+
+export interface StepsProps {
+  modelValue?: number
+  defaultValue?: number
+  direction?: ComponentDirection
+  status?: StepsStatus
+  size?: ComponentSize
+  clickable?: boolean
+  options: StepsOption[]
+}
+
+export interface StepsEmits {
+  change: [number]
+  'update:modelValue': [number]
+}

package/dist/components/stick-to-bottom/index.d.vue.ts

@@ -0,0 +1,35 @@
+import type { StickToBottomProps } from './types';
+declare var __VLS_1: {}, __VLS_3: {
+    isAtBottom: boolean;
+    scrollToBottom: () => void;
+    forceStickToBottom: () => void;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    action?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<StickToBottomProps, {
+    containerRef: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
+    contentRef: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
+    isAtBottom: import("vue").ShallowRef<boolean>;
+    scrollToBottom: () => void;
+    forceStickToBottom: () => void;
+    stickIfNeeded: () => void;
+    update: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (isAtBottom: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<StickToBottomProps> & Readonly<{
+    onChange?: ((isAtBottom: boolean) => any) | undefined;
+}>, {
+    enabled: boolean;
+    threshold: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/stick-to-bottom/index.vue

@@ -0,0 +1,78 @@
+<script setup>
+import { shallowRef, watch } from "vue";
+import { useStickToBottom } from "../../composables/use-stick-to-bottom.js";
+defineOptions({
+	name: "PStickToBottom",
+	inheritAttrs: false
+});
+const props = defineProps({
+	enabled: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	threshold: {
+		type: Number,
+		required: false,
+		default: 16
+	},
+	contentClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	},
+	contentStyle: {
+		type: [Object, String],
+		required: false
+	}
+});
+const emits = defineEmits(["change"]);
+const containerRef = shallowRef();
+const contentRef = shallowRef();
+const { isAtBottom, scrollToBottom, forceStickToBottom, stickIfNeeded, update } = useStickToBottom(containerRef, contentRef, {
+	threshold: () => props.threshold,
+	enabled: () => props.enabled
+});
+watch(() => isAtBottom.value, (value) => {
+	emits("change", value);
+});
+defineExpose({
+	containerRef,
+	contentRef,
+	isAtBottom,
+	scrollToBottom,
+	forceStickToBottom,
+	stickIfNeeded,
+	update
+});
+</script>
+
+<template>
+  <div
+    data-stick-to-bottom
+    ref="containerRef"
+    class="pxd-stick-to-bottom min-h-0 w-full max-w-full overflow-y-auto"
+    v-bind="$attrs"
+  >
+    <div
+      ref="contentRef"
+      class="pxd-stick-to-bottom--content"
+      :class="contentClass"
+      :style="contentStyle"
+    >
+      <slot />
+    </div>
+
+    <div v-if="$slots.action" class="pxd-stick-to-bottom--action bottom-0 sticky w-full">
+      <slot
+        name="action"
+        :is-at-bottom="isAtBottom"
+        :scroll-to-bottom="scrollToBottom"
+        :force-stick-to-bottom="forceStickToBottom"
+      />
+    </div>
+  </div>
+</template>

package/dist/components/stick-to-bottom/types.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentClass } from '../../types/shared/props'
+import type { CSSProperties } from 'vue'
+
+export interface StickToBottomProps {
+  enabled?: boolean
+  threshold?: number
+  contentClass?: ComponentClass
+  contentStyle?: CSSProperties | string
+}
+
+export interface StickToBottomEmits {
+  change: [isAtBottom: boolean]
+}