pxd 0.0.64 → 0.1.2

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

@@ -7,6 +7,8 @@ export interface PopoverProps {
   zIndex?: number | string
   offset?: number
   trigger?: PopoverTrigger | PopoverTrigger[]
+  triggerSelector?: string
+  alignPoint?: boolean
   disabled?: boolean
   adaptive?: boolean
   maxWidth?: number | string
@@ -18,13 +20,17 @@ export interface PopoverProps {
   modelValue?: boolean
   interactive?: boolean
   autoPosition?: boolean
+  destroyDelay?: number
   wrapperClass?: ComponentClass
   contentClass?: ComponentClass
   contentStyle?: CSSProperties | string
   toggleOnTrigger?: boolean
+  autoFocusElement?: string | boolean
+  fillTriggerWidth?: boolean
   closeOnInvisible?: boolean
   closeOnPressEscape?: boolean
   lockScrollOnVisible?: boolean
+  returnFocusOnDeactivate?: boolean
 }
 
 export interface PopoverEmits {
@@ -34,5 +40,6 @@ export interface PopoverEmits {
   'outside-click': [PointerEvent]
   'trigger-click': [PointerEvent]
   'visible-change': [visible: boolean]
+  'wrapper-keydown': [KeyboardEvent]
   'update:modelValue': [visible: boolean]
 }

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

@@ -3,16 +3,10 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ProgressProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (args_0: number) => any;
-    "update:modelValue": (args_0: number) => any;
-}, string, import("vue").PublicProps, Readonly<ProgressProps> & Readonly<{
-    onChange?: ((args_0: number) => any) | undefined;
-    "onUpdate:modelValue"?: ((args_0: number) => any) | undefined;
-}>, {
+declare const __VLS_base: import("vue").DefineComponent<ProgressProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressProps> & Readonly<{}>, {
     label: boolean | string | number;
+    variant: import("../../types/shared/props.js").ComponentVariant | "secondary";
     max: number;
-    variant: import("../../types/shared").ComponentVariant | "secondary";
     min: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/progress/index.vue

@@ -1,91 +1,113 @@
 <script setup>
-import { tv } from "tailwind-variants";
 import { computed } from "vue";
-import { useModelValue } from "../../composables/use-model-value";
-import { useConfigProvider } from "../../contexts/config-provider";
-import { isTruthyProp } from "../../utils/format";
-import { getColorByThreshold } from "../../utils/get";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { isTruthyProp } from "../../utils/format.js";
+import { getColorByThreshold } from "../../utils/helper.js";
 defineOptions({
-  name: "PProgress",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PProgress",
+	inheritAttrs: false
 });
 const props = defineProps({
-  min: { type: Number, required: false, default: 0 },
-  max: { type: Number, required: false, default: 100 },
-  size: { type: String, required: false },
-  label: { type: [Boolean, String, Number], required: false, default: false },
-  variant: { type: String, required: false, default: "primary" },
-  colors: { type: Object, required: false },
-  modelValue: { type: [Number, null], required: false }
-});
-const emits = defineEmits(["change", "update:modelValue"]);
-const progressVariant = tv({
-  base: "pxd-progress-bar flex-1 shrink-0 overflow-hidden rounded-full bg-gray-200",
-  variants: {
-    size: {
-      sm: "h-2",
-      md: "h-2.5",
-      lg: "h-3.5"
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
+	min: {
+		type: Number,
+		required: false,
+		default: 0
+	},
+	max: {
+		type: Number,
+		required: false,
+		default: 100
+	},
+	size: {
+		type: String,
+		required: false
+	},
+	label: {
+		type: [
+			Boolean,
+			String,
+			Number
+		],
+		required: false,
+		default: false
+	},
+	variant: {
+		type: String,
+		required: false,
+		default: "primary"
+	},
+	colors: {
+		type: Object,
+		required: false
+	},
+	modelValue: {
+		type: [Number, null],
+		required: false
+	}
 });
 const configProvider = useConfigProvider();
 const VARIANTS_COLORS = {
-  primary: "var(--color-primary)",
-  success: "hsl(var(--color-blue-700-value))",
-  warning: "hsl(var(--color-amber-700-value))",
-  secondary: "hsl(var(--color-gray-700-value))",
-  error: "hsl(var(--color-red-700-value))"
+	primary: "var(--color-primary)",
+	success: "hsl(var(--color-blue-700-value))",
+	warning: "hsl(var(--color-amber-700-value))",
+	secondary: "hsl(var(--color-gray-700-value))",
+	error: "hsl(var(--color-red-700-value))"
 };
-const progress = useModelValue(props, emits, {
-  get: () => props.modelValue || 0
-});
+const progress = computed(() => props.modelValue || 0);
 const computedLabel = computed(() => {
-  const { label } = props;
-  if (isTruthyProp(label)) {
-    return String(progress.value);
-  }
-  if (typeof label === "string" && label) {
-    return label;
-  }
-  return false;
+	const { label } = props;
+	if (isTruthyProp(label)) {
+		return String(progress.value);
+	}
+	if (typeof label === "string" && label) {
+		return label;
+	}
+	return false;
+});
+const { classes } = useTailwindVariant({
+	base: "pxd-progress-bar flex-1 shrink-0 overflow-hidden rounded-full bg-gray-200",
+	variants: { size: {
+		sm: "h-2",
+		md: "h-2.5",
+		lg: "h-3.5"
+	} }
+}, {
+	mergeAttrsClass: false,
+	selection: () => ({ size: props.size || configProvider.size })
 });
-const computedClasses = computed(() => {
-  return progressVariant({ size: props.size || configProvider.size });
+const relativeProgress = computed(() => progress.value - props.min);
+const percentage = computed(() => {
+	const range = props.max - props.min;
+	return range > 0 ? relativeProgress.value / range * 100 : 0;
 });
 const computedColors = computed(() => {
-  const { colors, variant } = props;
-  if (colors) {
-    return getColorByThreshold(progress.value, colors) || VARIANTS_COLORS[variant];
-  }
-  return VARIANTS_COLORS[variant];
+	const { colors, variant } = props;
+	if (colors) {
+		return getColorByThreshold(percentage.value, colors) || VARIANTS_COLORS[variant];
+	}
+	return VARIANTS_COLORS[variant];
 });
 const computedProgressBarStyles = computed(() => {
-  const { min, max } = props;
-  return {
-    width: `${progress.value / (max - min) * 100}%`,
-    backgroundColor: computedColors.value || VARIANTS_COLORS.primary
-  };
+	return {
+		width: `${percentage.value}%`,
+		backgroundColor: computedColors.value || VARIANTS_COLORS.primary
+	};
 });
 </script>
 
 <template>
   <div
+    data-progress
     role="progressbar"
     class="pxd-progress flex w-full items-center"
     :aria-valuenow="progress"
     :aria-valuemin="min"
     :aria-valuemax="max"
+    :data-variant="variant"
     v-bind="$attrs"
   >
-    <div :class="computedClasses">
+    <div :class="classes">
       <div
         class="h-full rounded-inherit motion-safe:transition-appearance"
         :style="computedProgressBarStyles"
@@ -94,7 +116,7 @@ const computedProgressBarStyles = computed(() => {
 
     <span
       v-if="computedLabel || $slots.default"
-      class="text-sm ml-3 font-mono text-foreground-secondary empty:hidden"
+      class="text-sm ms-3 font-mono text-foreground-secondary empty:hidden"
     >
       <slot>
         {{ computedLabel }}

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

@@ -9,8 +9,3 @@ export interface ProgressProps {
   colors?: Record<string, string>
   modelValue?: number | null
 }
-
-export interface ProgressEmits {
-  change: [NonNullable<ProgressProps['modelValue']>]
-  'update:modelValue': [NonNullable<ProgressProps['modelValue']>]
-}

package/dist/components/project-banner/index.d.vue.ts

@@ -7,7 +7,9 @@ type __VLS_Slots = {} & {
 } & {
     action?: (props: typeof __VLS_5) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ProjectBannerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProjectBannerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<ProjectBannerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProjectBannerProps> & Readonly<{}>, {
+    variant: import("./types").ProjectBannerVariant;
+}, {}, {}, {}, 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;

package/dist/components/project-banner/index.vue

@@ -1,45 +1,47 @@
 <script setup>
-import { tv } from "tailwind-variants";
-import { computed } from "vue";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
 defineOptions({
-  name: "PProjectBanner",
-  inheritAttrs: false
+	name: "PProjectBanner",
+	inheritAttrs: false
 });
 const props = defineProps({
-  label: { type: [String, Number, Array, null], required: false },
-  variant: { type: String, required: false }
+	label: {
+		type: null,
+		required: false
+	},
+	variant: {
+		type: String,
+		required: false,
+		default: "default"
+	}
 });
-const projectBannerVariant = tv({
-  slots: {
-    base: "gap-x-2 py-2 leading-5 min-h-10 text-sm flex w-full -translate-y-px items-center justify-center border-y",
-    action: "ml-6 md:ml-0 font-medium cursor-pointer underline underline-offset-3 motion-safe:transition-colors"
-  },
-  variants: {
-    variant: {
-      warning: {
-        base: "border-amber-400 bg-amber-100 text-amber-900",
-        action: "text-amber-1000 decoration-amber-400 hover:border-amber-500 hover:text-amber-900"
-      },
-      success: {
-        base: "border-green-400 bg-green-100 text-green-900",
-        action: "text-green-1000 decoration-green-400 hover:border-green-500 hover:text-green-900"
-      },
-      error: {
-        base: "border-red-400 bg-red-100 text-red-900",
-        action: "text-red-1000 decoration-red-400 hover:border-red-500 hover:text-red-900"
-      },
-      info: {
-        base: "border-blue-400 bg-blue-100 text-blue-900",
-        action: "text-blue-1000 decoration-blue-400 hover:border-blue-500 hover:text-blue-900"
-      }
-    }
-  }
+const { attrs, classes } = useTailwindVariant({
+	base: "gap-x-2 py-2 leading-5 min-h-10 text-sm flex w-full -translate-y-px items-center justify-center border-y",
+	variants: { variant: {
+		default: "border-gray-400 bg-gray-100 text-gray-900",
+		warning: "border-amber-400 bg-amber-100 text-amber-900",
+		success: "border-green-400 bg-green-100 text-green-900",
+		error: "border-red-400 bg-red-100 text-red-900",
+		info: "border-blue-400 bg-blue-100 text-blue-900"
+	} }
+}, { selection: () => ({ variant: props.variant }) });
+const { classes: actionClasses } = useTailwindVariant({
+	base: "ms-6 md:ms-0 font-medium cursor-pointer underline underline-offset-3 motion-safe:transition-colors",
+	variants: { variant: {
+		default: "text-gray-1000 decoration-gray-500",
+		warning: "text-amber-1000 decoration-amber-400 hover:border-amber-500 hover:text-amber-900",
+		success: "text-green-1000 decoration-green-400 hover:border-green-500 hover:text-green-900",
+		error: "text-red-1000 decoration-red-400 hover:border-red-500 hover:text-red-900",
+		info: "text-blue-1000 decoration-blue-400 hover:border-blue-500 hover:text-blue-900"
+	} }
+}, {
+	mergeAttrsClass: false,
+	selection: () => ({ variant: props.variant })
 });
-const computedClasses = computed(() => projectBannerVariant({ variant: props.variant }));
 </script>
 
 <template>
-  <aside :class="computedClasses.base()" v-bind="$attrs">
+  <aside data-project-banner :class="classes" :data-variant="variant" v-bind="attrs">
     <div class="gap-2 px-6 md:justify-center md:flex-row md:items-center flex w-full flex-col">
       <div class="gap-2 flex items-center">
         <div v-if="$slots.icon" aria-hidden="true" class="shrink-0">
@@ -51,7 +53,7 @@ const computedClasses = computed(() => projectBannerVariant({ variant: props.var
         </p>
       </div>
 
-      <div v-if="$slots.action" :class="computedClasses.action()">
+      <div v-if="$slots.action" :class="actionClasses">
         <slot name="action"></slot>
       </div>
     </div>

package/dist/components/project-banner/types.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentLabel } from '../../types/shared'
 
-export type ProjectBannerVariant = 'warning' | 'error' | 'success' | 'info'
+export type ProjectBannerVariant = 'default' | 'warning' | 'error' | 'success' | 'info'
 
 export interface ProjectBannerProps {
   label?: ComponentLabel

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

@@ -0,0 +1,10 @@
+import type { QuestionnaireProps, QuestionnaireAnswers, QuestionnaireQuestion } from './types';
+declare const __VLS_export: import("vue").DefineComponent<QuestionnaireProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (args_0: QuestionnaireAnswers) => any;
+}, string, import("vue").PublicProps, Readonly<QuestionnaireProps> & Readonly<{
+    onSubmit?: ((args_0: QuestionnaireAnswers) => any) | undefined;
+}>, {
+    questions: QuestionnaireQuestion[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;