pxd 0.0.64 → 0.1.2

package/dist/components/switch/index.vue

@@ -1,41 +1,62 @@
 <script setup>
 import { computed } from "vue";
-import { useModelValue } from "../../composables/use-model-value";
-import { BASIC_HEIGHTS } from "../../constants/size";
-import { useConfigProvider } from "../../contexts/config-provider";
-import { provideSwitchContext } from "../../contexts/switch";
-import { getFallbackValue } from "../../utils/get";
-import { getUniqueId } from "../../utils/uid";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { BASIC_HEIGHTS } from "../../constants/size.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { provideSwitchContext } from "../../contexts/switch.js";
+import { getUniqueId, getFallbackValue } from "../../utils/helper.js";
 import PSwitchItem from "../switch-item/index.vue";
 defineOptions({
-  name: "PSwitch",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PSwitch",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  disabled: { type: Boolean, required: false },
-  fullWidth: { type: Boolean, required: false },
-  size: { type: String, required: false },
-  options: { type: Array, required: false, default: () => [] },
-  modelValue: { type: [String, Number], required: false, default: "" }
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	fullWidth: {
+		type: Boolean,
+		required: false
+	},
+	size: {
+		type: String,
+		required: false
+	},
+	options: {
+		type: Array,
+		required: false,
+		default: () => []
+	},
+	modelValue: {
+		type: [String, Number],
+		required: false,
+		default: ""
+	}
 });
 const emits = defineEmits(["change", "update:modelValue"]);
 const SIZES = {
-  sm: `${BASIC_HEIGHTS.sm} text-13`,
-  md: `${BASIC_HEIGHTS.md} text-sm`,
-  lg: `${BASIC_HEIGHTS.lg} text-base`
+	sm: `${BASIC_HEIGHTS.sm} text-13`,
+	md: `${BASIC_HEIGHTS.md} text-sm`,
+	lg: `${BASIC_HEIGHTS.lg} text-base`
 };
 const configProvider = useConfigProvider();
 const modelValue = useModelValue(props, emits);
 const computedSize = computed(() => getFallbackValue(props.size, SIZES, configProvider.size));
-provideSwitchContext({ props, emits, name: getUniqueId() });
+provideSwitchContext({
+	props,
+	emits,
+	name: getUniqueId()
+});
 </script>
 
 <template>
   <div
+    data-switch
     class="pxd-switch p-1 flex touch-manipulation rounded-lg border"
     :class="[fullWidth ? 'w-full' : 'w-max', computedSize]"
     v-bind="$attrs"

package/dist/components/switch-item/index.vue

@@ -1,57 +1,56 @@
 <script setup>
-import { tv } from "tailwind-variants";
 import { computed } from "vue";
-import { useModelValue } from "../../composables/use-model-value";
-import { useSwitchContext } from "../../contexts/switch";
-import { getUniqueId } from "../../utils/uid";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { useSwitchContext } from "../../contexts/switch.js";
+import { getUniqueId } from "../../utils/helper.js";
 defineOptions({
-  name: "PSwitchItem",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PSwitchItem",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  label: { type: [String, Number, Array, null], required: false },
-  value: { type: [String, Number], required: true },
-  disabled: { type: Boolean, required: false }
+	label: {
+		type: null,
+		required: false
+	},
+	value: {
+		type: [String, Number],
+		required: true
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	}
 });
 const emits = defineEmits([]);
-const switchVariant = tv({
-  base: "pxd-switch-item--label px-2.5 font-medium flex size-full items-center justify-center truncate rounded-sm text-foreground-secondary peer-focus-ring outline-none select-none peer-checked:bg-gray-100 peer-disabled:cursor-not-allowed peer-disabled:text-gray-800 empty:hidden hover:text-foreground motion-safe:transition-appearance",
-  variants: {
-    disabled: {
-      true: "",
-      false: "peer-checked:text-foreground"
-    }
-  },
-  defaultVariants: {
-    disabled: false
-  }
-});
 const uniqueId = getUniqueId();
 const switchGroupContext = useSwitchContext();
 const switchGroupName = switchGroupContext?.name ?? getUniqueId();
-const modelValue = useModelValue(
-  switchGroupContext?.props ?? props,
-  switchGroupContext?.emits ?? emits
-);
+const modelValue = useModelValue(switchGroupContext?.props ?? props, switchGroupContext?.emits ?? emits);
 const isChecked = computed(() => modelValue.value === props.value);
-const isDisabled = computed(() => props.disabled || switchGroupContext?.props.disabled);
-const computedClasses = computed(() => {
-  return switchVariant({ disabled: isDisabled.value });
+const isDisabled = computed(() => props.disabled || switchGroupContext?.props.disabled || false);
+const { classes } = useTailwindVariant({
+	base: "pxd-switch-item--label px-2.5 font-medium flex size-full items-center justify-center truncate rounded-sm text-foreground-secondary peer-focus-ring outline-none select-none peer-checked:bg-gray-100 peer-disabled:cursor-not-allowed peer-disabled:text-gray-800 empty:hidden hover:text-foreground motion-safe:transition-colors",
+	variants: { disabled: { false: "peer-checked:text-foreground" } }
+}, {
+	mergeAttrsClass: false,
+	selection: () => ({ disabled: isDisabled.value })
 });
 function onInputChange() {
-  if (isDisabled.value) {
-    return;
-  }
-  modelValue.value = props.value;
+	if (isDisabled.value) {
+		return;
+	}
+	modelValue.value = props.value;
 }
 </script>
 
 <template>
   <label
+    data-switch-item
     role="switch"
     :aria-selected="isChecked"
     :data-disabled="isDisabled"
@@ -70,7 +69,7 @@ function onInputChange() {
       @change="onInputChange"
     />
 
-    <div :class="computedClasses" @focusin="onInputChange">
+    <div :class="classes" @focusin="onInputChange">
       <slot>
         {{ label }}
       </slot>

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

@@ -1,12 +1,14 @@
-import type { TabsProps } from './types';
+import type { ComponentValue } from '../../types/shared';
+import type { TabsProps, TabsOptions } from './types';
 declare const __VLS_export: import("vue").DefineComponent<TabsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (args_0: import("./types").TabsValue) => any;
-    "update:modelValue": (args_0: import("./types").TabsValue) => any;
+    change: (args_0: NonNullable<ComponentValue>) => any;
+    "update:modelValue": (args_0: NonNullable<ComponentValue>) => any;
 }, string, import("vue").PublicProps, Readonly<TabsProps> & Readonly<{
-    onChange?: ((args_0: import("./types").TabsValue) => any) | undefined;
-    "onUpdate:modelValue"?: ((args_0: import("./types").TabsValue) => any) | undefined;
+    onChange?: ((args_0: NonNullable<ComponentValue>) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: NonNullable<ComponentValue>) => any) | undefined;
 }>, {
-    variant: "default" | "secondary";
+    variant: "default" | "secondary" | "segmented";
+    options: TabsOptions[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;