vueless 0.0.581 → 0.0.582

package/composables/useUI.ts

@@ -6,11 +6,11 @@ import {
   STRATEGY_TYPE,
   CVA_CONFIG_KEY,
   SYSTEM_CONFIG_KEY,
-  NESTED_COMPONENT_PATTERN_REG_EXP,
   EXTENDS_PATTERN_REG_EXP,
+  NESTED_COMPONENT_PATTERN_REG_EXP,
 } from "../constants.js";
 
-import type { ComponentInternalInstance, Ref, ComputedRef } from "vue";
+import type { Ref, ComputedRef } from "vue";
 import type {
   CVA,
   UseUI,
@@ -23,6 +23,7 @@ import type {
   ComponentNames,
   ComponentConfig,
   KeyAttrsWithConfig,
+  VuelessComponentInstance,
 } from "../types.ts";
 
 /**
@@ -37,9 +38,12 @@ export default function useUI<T>(
   mutatedProps?: MutatedProps,
   topLevelClassKey?: string,
 ) {
-  const { type, props } = getCurrentInstance() as ComponentInternalInstance;
+  const { type, props, parent } = getCurrentInstance() as VuelessComponentInstance;
+
+  const componentName = type?.internal
+    ? (parent?.type.__name as ComponentNames)
+    : (type.__name as ComponentNames);
 
-  const componentName = type.__name as ComponentNames;
   const globalConfig = vuelessConfig?.component?.[componentName] || {};
 
   const vuelessStrategy = Object.values(STRATEGY_TYPE).includes(vuelessConfig.strategy || "")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.581",
+  "version": "0.0.582",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/types.ts

@@ -55,7 +55,7 @@ import UInputFileConfig from "./ui.form-input-file/config.ts";
 import UInputMoneyConfig from "./ui.form-input-money/config.ts";
 import UDataListConfig from "./ui.data-list/config.ts";
 
-import type { ComputedRef, MaybeRef, Ref } from "vue";
+import type { ComputedRef, MaybeRef, Ref, ComponentInternalInstance } from "vue";
 import type { Props } from "tippy.js";
 import type { LocaleOptions } from "./adatper.locale/vueless.ts";
 
@@ -170,62 +170,62 @@ export interface Directives {
 }
 
 export interface Components {
-  UText?: Partial<typeof UTextDefaultConfig>;
-  UAlert?: Partial<typeof UAlertDefaultConfig>;
-  UEmpty?: Partial<typeof UEmptyDefaultConfig>;
-  UFile?: Partial<typeof UFileDefaultConfig>;
-  UFiles?: Partial<typeof UFilesDefaultConfig>;
-  UMoney?: Partial<typeof UMoneyDefaultConfig>;
-  UHeader?: Partial<typeof UHeaderDefaultConfig>;
-  UNotify?: Partial<typeof UNotifyDefaultConfig>;
-  UDot?: Partial<typeof UDotDefaultConfig>;
-  UButton?: Partial<typeof UButtonDefaultConfig>;
-  ULink?: Partial<typeof ULinkDefaultConfig>;
-  UToggle?: Partial<typeof UToggleDefaultConfig>;
-  UToggleItem?: Partial<typeof UToggleItemDefaultConfig>;
-  UBadge?: Partial<typeof UBadgeDefaultConfig>;
-  UCalendar?: Partial<typeof UCalendarDefaultConfig>;
-  UDatePicker?: Partial<typeof UDatePickerConfig>;
-  UDatePickerRange?: Partial<typeof UDatePickerRangeConfig>;
-  UTable?: Partial<typeof UDataTableConfig>;
-  UDropdownBadge?: Partial<typeof UDropdownBadgeConfig>;
-  UDropdownButton?: Partial<typeof UDropdownButtonConfig>;
-  UDropdownLink?: Partial<typeof UDropdownLinkConfig>;
-  UDropdownList?: Partial<typeof UDropdownListConfig>;
-  UAccordion?: Partial<typeof UAccordionConfig>;
-  UCard?: Partial<typeof UCardConfig>;
-  UCol?: Partial<typeof UColConfig>;
-  UDivider?: Partial<typeof UDividerConfig>;
-  UGroup?: Partial<typeof UGroupConfig>;
-  UModal?: Partial<typeof UModalConfig>;
-  UModalConfirm?: Partial<typeof UModalConfirmConfig>;
-  UPage?: Partial<typeof UPageConfig>;
-  URow?: Partial<typeof URowConfig>;
-  ULoader?: Partial<typeof ULoaderConfig>;
-  ULoaderOverlay?: Partial<typeof ULoaderOverlayConfig>;
-  ULoaderProgress?: Partial<typeof ULoaderProgressConfig>;
-  UPagination?: Partial<typeof UPaginationConfig>;
-  UProgress?: Partial<typeof UProgressConfig>;
-  UTab?: Partial<typeof UTabConfig>;
-  UTabs?: Partial<typeof UTabsConfig>;
-  UAvatar?: Partial<typeof UAvatarConfig>;
-  UIcon?: Partial<typeof UIconConfig>;
-  UCheckbox?: Partial<typeof UCheckboxConfig>;
-  UCheckboxGroup?: Partial<typeof UCheckboxGroupConfig>;
-  UCheckboxMultiState?: Partial<typeof UCheckboxMultiStateConfig>;
-  URadio?: Partial<typeof URadioConfig>;
-  URadioGroup?: Partial<typeof URadioGroupConfig>;
-  USwitch?: Partial<typeof USwitchConfig>;
-  UTextarea?: Partial<typeof UTextareaConfig>;
-  ULabel?: Partial<typeof ULabelConfig>;
-  UColorPicker?: Partial<typeof UColorPickerConfig>;
-  UInput?: Partial<typeof UInputConfig>;
-  UInputNumber?: Partial<typeof UInputNumberConfig>;
-  UInputRating?: Partial<typeof UInputRatingConfig>;
-  UInputSearch?: Partial<typeof UInputSearchConfig>;
-  UInputFile?: Partial<typeof UInputFileConfig>;
-  UInputMoney?: Partial<typeof UInputMoneyConfig>;
-  UDataList?: Partial<typeof UDataListConfig>;
+  UText: Partial<typeof UTextDefaultConfig>;
+  UAlert: Partial<typeof UAlertDefaultConfig>;
+  UEmpty: Partial<typeof UEmptyDefaultConfig>;
+  UFile: Partial<typeof UFileDefaultConfig>;
+  UFiles: Partial<typeof UFilesDefaultConfig>;
+  UMoney: Partial<typeof UMoneyDefaultConfig>;
+  UHeader: Partial<typeof UHeaderDefaultConfig>;
+  UNotify: Partial<typeof UNotifyDefaultConfig>;
+  UDot: Partial<typeof UDotDefaultConfig>;
+  UButton: Partial<typeof UButtonDefaultConfig>;
+  ULink: Partial<typeof ULinkDefaultConfig>;
+  UToggle: Partial<typeof UToggleDefaultConfig>;
+  UToggleItem: Partial<typeof UToggleItemDefaultConfig>;
+  UBadge: Partial<typeof UBadgeDefaultConfig>;
+  UCalendar: Partial<typeof UCalendarDefaultConfig>;
+  UDatePicker: Partial<typeof UDatePickerConfig>;
+  UDatePickerRange: Partial<typeof UDatePickerRangeConfig>;
+  UTable: Partial<typeof UDataTableConfig>;
+  UDropdownBadge: Partial<typeof UDropdownBadgeConfig>;
+  UDropdownButton: Partial<typeof UDropdownButtonConfig>;
+  UDropdownLink: Partial<typeof UDropdownLinkConfig>;
+  UDropdownList: Partial<typeof UDropdownListConfig>;
+  UAccordion: Partial<typeof UAccordionConfig>;
+  UCard: Partial<typeof UCardConfig>;
+  UCol: Partial<typeof UColConfig>;
+  UDivider: Partial<typeof UDividerConfig>;
+  UGroup: Partial<typeof UGroupConfig>;
+  UModal: Partial<typeof UModalConfig>;
+  UModalConfirm: Partial<typeof UModalConfirmConfig>;
+  UPage: Partial<typeof UPageConfig>;
+  URow: Partial<typeof URowConfig>;
+  ULoader: Partial<typeof ULoaderConfig>;
+  ULoaderOverlay: Partial<typeof ULoaderOverlayConfig>;
+  ULoaderProgress: Partial<typeof ULoaderProgressConfig>;
+  UPagination: Partial<typeof UPaginationConfig>;
+  UProgress: Partial<typeof UProgressConfig>;
+  UTab: Partial<typeof UTabConfig>;
+  UTabs: Partial<typeof UTabsConfig>;
+  UAvatar: Partial<typeof UAvatarConfig>;
+  UIcon: Partial<typeof UIconConfig>;
+  UCheckbox: Partial<typeof UCheckboxConfig>;
+  UCheckboxGroup: Partial<typeof UCheckboxGroupConfig>;
+  UCheckboxMultiState: Partial<typeof UCheckboxMultiStateConfig>;
+  URadio: Partial<typeof URadioConfig>;
+  URadioGroup: Partial<typeof URadioGroupConfig>;
+  USwitch: Partial<typeof USwitchConfig>;
+  UTextarea: Partial<typeof UTextareaConfig>;
+  ULabel: Partial<typeof ULabelConfig>;
+  UColorPicker: Partial<typeof UColorPickerConfig>;
+  UInput: Partial<typeof UInputConfig>;
+  UInputNumber: Partial<typeof UInputNumberConfig>;
+  UInputRating: Partial<typeof UInputRatingConfig>;
+  UInputSearch: Partial<typeof UInputSearchConfig>;
+  UInputFile: Partial<typeof UInputFileConfig>;
+  UInputMoney: Partial<typeof UInputMoneyConfig>;
+  UDataList: Partial<typeof UDataListConfig>;
 }
 
 export type Component = {
@@ -443,6 +443,12 @@ export interface ExposeProperty {
   description?: string;
 }
 
+export type VuelessComponentInstance = ComponentInternalInstance & {
+  type?: {
+    internal?: boolean;
+  };
+};
+
 /**
  * Utility types to extract component props, slots, emit, exposed types.
  * Original code taken from `vue-component-type-helpers` npm package.

package/ui.data-table/UTableRow.vue

@@ -16,6 +16,8 @@ import type { Cell, CellObject, Row, RowScopedProps, UTableRowProps } from "./ty
 const NESTED_ROW_SHIFT_REM = 1;
 const LAST_NESTED_ROW_SHIFT_REM = 1.1;
 
+defineOptions({ internal: true });
+
 const props = defineProps<UTableRowProps>();
 
 const emit = defineEmits(["toggleRowVisibility", "click", "dblclick", "clickCell"]);

package/ui.form-calendar/UCalendarDayView.vue

@@ -19,6 +19,8 @@ import type { UCalendarViewProps, Config } from "./types.ts";
 
 import UButton from "../ui.button/UButton.vue";
 
+defineOptions({ internal: true });
+
 const props = defineProps<UCalendarViewProps>();
 
 const emit = defineEmits(["input"]);

package/ui.form-calendar/UCalendarMonthView.vue

@@ -13,6 +13,8 @@ import type { UCalendarViewProps, Config } from "./types.ts";
 
 import UButton from "../ui.button/UButton.vue";
 
+defineOptions({ internal: true });
+
 const props = defineProps<UCalendarViewProps>();
 
 const emit = defineEmits(["input"]);

package/ui.form-calendar/UCalendarYearView.vue

@@ -13,6 +13,8 @@ import type { UCalendarViewProps, Config } from "./types.ts";
 
 import UButton from "../ui.button/UButton.vue";
 
+defineOptions({ internal: true });
+
 const props = defineProps<UCalendarViewProps>();
 
 const emit = defineEmits(["input"]);

package/ui.form-date-picker-range/UDatePickerRangeInputs.vue

@@ -13,6 +13,8 @@ import type { RangeDate } from "../ui.form-calendar/types.ts";
 
 type UInputRef = InstanceType<typeof UInput>;
 
+defineOptions({ internal: true });
+
 const props = defineProps<UDatePickerRangeInputsProps>();
 
 const rangeInputStartRef = useTemplateRef<UInputRef>("range-input-start");

package/ui.form-date-picker-range/UDatePickerRangePeriodMenu.vue

@@ -15,6 +15,8 @@ import { Period } from "./constants.ts";
 import type { UDatePickerRangePeriodMenuProps, IsDatePeriodOutOfRange } from "./types.ts";
 import type { DatePeriodRange } from "./utilDateRange.ts";
 
+defineOptions({ internal: true });
+
 const props = defineProps<UDatePickerRangePeriodMenuProps>();
 
 const emit = defineEmits(["toggleMenu", "closeMenu", "clickPrev", "clickNext"]);

package/ui.navigation-progress/UProgress.vue

@@ -7,7 +7,7 @@ import { getDefaults } from "../utils/ui.ts";
 import defaultConfig from "./config.ts";
 import { UProgress, VARIANT } from "./constants.ts";
 
-import StepperProgress from "./StepperProgress.vue";
+import UStepperProgress from "./UStepperProgress.vue";
 import UHeader from "../ui.text-header/UHeader.vue";
 
 import type { UProgressProps, HeaderSize, Config } from "./types.ts";
@@ -59,8 +59,8 @@ const progressPercent = computed(() => {
   return `${currentPercent} ${maxPercent}`;
 });
 
-function isActiveStep(index: number) {
-  return index === props.value;
+function isActiveStep(index: number | string) {
+  return Number(index) === props.value;
 }
 
 /**
@@ -111,7 +111,7 @@ const { progressAttrs, wrapperAttrs, indicatorAttrs, stepAttrs, stepperAttrs } =
       </template>
     </div>
 
-    <StepperProgress
+    <UStepperProgress
       v-if="isVariant.stepper"
       v-bind="stepperAttrs"
       :color="color"

package/ui.navigation-progress/{StepperProgress.vue → UStepperProgress.vue}

@@ -9,6 +9,8 @@ import { GRAY_COLORS } from "../constants.js";
 
 import type { StepperProgressProps, Config } from "./types.ts";
 
+defineOptions({ internal: true });
+
 const props = withDefaults(defineProps<StepperProgressProps>(), {
   dataTest: "",
 });

package/web-types.json

@@ -1,72 +1,12 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.581",
+  "version": "0.0.582",
   "contributions": {
     "html": {
       "description-markup": "markdown",
       "types-syntax": "typescript",
       "tags": [
-        {
-          "name": "StepperProgress",
-          "description": "",
-          "attributes": [
-            {
-              "name": "progressPercent",
-              "required": true,
-              "description": "Stepper progress percent value.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "value",
-              "required": true,
-              "description": "Stepper progress value (current step).",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              }
-            },
-            {
-              "name": "color",
-              "required": true,
-              "description": "Stepper progress color.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "brand"
-            },
-            {
-              "name": "config",
-              "required": false,
-              "description": "Component config object.",
-              "enum": [
-                "Config"
-              ],
-              "value": {
-                "kind": "expression",
-                "type": "ComponentConfig"
-              }
-            },
-            {
-              "name": "dataTest",
-              "required": false,
-              "description": "Data-test attribute for automated testing.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            }
-          ],
-          "source": {
-            "module": "./src/ui.navigation-progress/StepperProgress.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "UAccordion",
           "description": "",
@@ -10393,6 +10333,66 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "UStepperProgress",
+          "description": "",
+          "attributes": [
+            {
+              "name": "progressPercent",
+              "required": true,
+              "description": "Stepper progress percent value.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "value",
+              "required": true,
+              "description": "Stepper progress value (current step).",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              }
+            },
+            {
+              "name": "color",
+              "required": true,
+              "description": "Stepper progress color.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "brand"
+            },
+            {
+              "name": "config",
+              "required": false,
+              "description": "Component config object.",
+              "enum": [
+                "Config"
+              ],
+              "value": {
+                "kind": "expression",
+                "type": "ComponentConfig"
+              }
+            },
+            {
+              "name": "dataTest",
+              "required": false,
+              "description": "Data-test attribute for automated testing.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            }
+          ],
+          "source": {
+            "module": "./src/ui.navigation-progress/UStepperProgress.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "USwitch",
           "description": "",