pxd 0.0.64 → 0.1.2

package/dist/components/stack/index.vue

@@ -1,110 +1,124 @@
 <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 { 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 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 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/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/steps/index.d.vue.ts

@@ -0,0 +1,28 @@
+import type { StepsOption, StepsProps, StepsStatus } from './types';
+declare var __VLS_9: {
+    index: number;
+    item: StepsOption;
+    status: StepsStatus;
+};
+type __VLS_Slots = {} & {
+    item?: (props: typeof __VLS_9) => 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 "./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 configProvider = useConfigProvider();
+const modelValue = useModelValue(props, emits);
+/** Uncontrolled fallback: a bound `modelValue` always wins. */
+const innerValue = shallowRef(props.defaultValue);
+const activeIndex = computed(() => props.modelValue ?? innerValue.value ?? 0);
+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"
+	}
+};
+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
+	};
+});
+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/step-item.d.vue.ts

@@ -0,0 +1,24 @@
+import type { StepsOption, StepsStatus } from './types';
+type __VLS_Props = {
+    clickable?: boolean;
+    index: number;
+    option: StepsOption;
+    status: StepsStatus;
+};
+declare var __VLS_11: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (args_0: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((args_0: number) => any) | undefined;
+}>, {}, {}, {}, {}, 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/step-item.vue

@@ -0,0 +1,86 @@
+<script setup>
+import CheckIcon from "@gdsicon/vue/check";
+import CrossIcon from "@gdsicon/vue/cross";
+import { computed } from "vue";
+defineOptions({ name: "PStepsItem" });
+const props = defineProps({
+	clickable: {
+		type: Boolean,
+		required: false
+	},
+	index: {
+		type: Number,
+		required: true
+	},
+	option: {
+		type: Object,
+		required: true
+	},
+	status: {
+		type: String,
+		required: true
+	}
+});
+const emits = defineEmits(["select"]);
+const disabled = computed(() => !!props.option.disabled);
+function onClick() {
+	if (!props.clickable || disabled.value) {
+		return;
+	}
+	emits("select", props.index);
+}
+</script>
+
+<template>
+  <div
+    data-step-item
+    class="pxd-steps-item px-1 group/steps-item relative flex gap-(--steps-gap) group-data-[direction=horizontal]/steps:flex-1 group-data-[direction=horizontal]/steps:flex-col group-data-[direction=horizontal]/steps:items-center data-[disabled=true]:opacity-50"
+    :data-status="status"
+    :data-disabled="disabled"
+    :class="clickable && !disabled ? 'cursor-pointer' : 'cursor-default'"
+    role="listitem"
+    :aria-current="status === 'process' ? 'step' : void 0"
+    @click="onClick"
+  >
+    <div class="pxd-steps-item--indicator-wrapper relative flex shrink-0">
+      <span
+        class="pxd-steps-item--indicator font-medium inline-flex size-(--steps-indicator-size) items-center justify-center rounded-full border border-border bg-background-100 text-(length:--steps-indicator-font-size) text-foreground-secondary data-[status=error]:border-red-800 data-[status=error]:bg-red-800 data-[status=error]:text-gray-100 data-[status=finish]:border-gray-300 data-[status=finish]:bg-gray-100 data-[status=process]:border-primary data-[status=process]:bg-primary data-[status=process]:text-primary-foreground motion-safe:transition-colors dark:data-[status=error]:text-gray-1000"
+        :data-status="status"
+      >
+        <CheckIcon
+          v-if="status === 'finish'"
+          class="pxd-steps-item--icon size-(--steps-icon-size)"
+          aria-hidden="true"
+        />
+        <CrossIcon
+          v-else-if="status === 'error'"
+          class="pxd-steps-item--icon size-(--steps-icon-size)"
+          aria-hidden="true"
+        />
+        <template v-else>{{ index + 1 }}</template>
+      </span>
+    </div>
+
+    <div
+      class="pxd-steps-item--content group-data-[direction=horizontal]/steps:min-w-0 flex flex-col group-data-[direction=horizontal]/steps:items-center group-data-[direction=horizontal]/steps:text-center"
+    >
+      <slot>
+        <div
+          class="pxd-steps-item--title font-medium text-(length:--steps-title-font-size) leading-(--steps-indicator-size) text-foreground-secondary group-data-[status=error]/steps-item:text-red-700 group-data-[status=process]/steps-item:text-foreground motion-safe:transition-colors"
+        >
+          {{ option.title }}
+        </div>
+        <div
+          v-if="option.description"
+          class="pxd-steps-item--description text-(length:--steps-description-font-size) text-foreground-secondary opacity-80"
+        >
+          {{ option.description }}
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style>
+.pxd-steps[data-direction=horizontal] .pxd-steps-item:not(:last-child):after{background-color:var(--color-border);content:"";height:1px;left:calc(50% + var(--steps-indicator-size)/2 + var(--steps-gap));position:absolute;right:calc(-50% + var(--steps-indicator-size)/2 + var(--steps-gap));top:calc(var(--steps-indicator-size)/2)}.pxd-steps[data-direction=horizontal] .pxd-steps-item[data-status=finish]:after{background-color:var(--color-primary)}.pxd-steps[data-direction=vertical] .pxd-steps-item:not(:last-child){padding-bottom:var(--steps-gap)}.pxd-steps[data-direction=vertical] .pxd-steps-item:not(:last-child):after{background-color:var(--color-border);bottom:calc(var(--steps-gap)/2);content:"";left:calc(var(--steps-indicator-size)/2 + var(--spacing));position:absolute;top:calc(var(--steps-indicator-size) + var(--steps-gap)/2);width:1px}.pxd-steps[data-direction=vertical] .pxd-steps-item[data-status=finish]:after{background-color:var(--color-primary)}
+</style>

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

@@ -0,0 +1,25 @@
+import type { ComponentDirection, ComponentLabel, ComponentSize } from '../../types/shared'
+
+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;
+    };
+};