vueless 0.0.203 → 0.0.205

package/composable.ui/index.js

@@ -76,9 +76,10 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
     const attrs = useAttrs();
     const isDev = import.meta.env.DEV;
     const vuelessAttrs = ref({});
+    const isTopLevelKey = (topLevelClassKey || firstClassKey) === configKey;
 
     const commonAttrs = {
-      ...attrs,
+      ...(isTopLevelKey ? attrs : {}),
       component: isDev ? attrs.component || componentName || null : null,
       "config-key": isDev ? attrs["config-key"] || configKey || null : null,
       "child-component": isDev && attrs.component ? nestedComponent || componentName : null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.203",
+  "version": "0.0.205",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.button/index.vue

@@ -10,7 +10,7 @@
     <template v-if="loading">
       <!-- Label is needed to prevent changing button height -->
       <div v-bind="textAttrs" tabindex="-1" class="invisible w-0" v-text="label" />
-      <ULoader :size="loaderSize" :color="componentColor" v-bind="loaderAttrs" />
+      <ULoader :loading="loading" :size="loaderSize" :color="componentColor" v-bind="loaderAttrs" />
     </template>
 
     <template v-else>

package/ui.button-toggle-item/index.vue

@@ -11,7 +11,7 @@
     :square="toValue(square)"
     :disabled="toValue(disabled)"
     v-bind="buttonAttrs"
-    @click.stop="onClickSetValue"
+    @click="onClickSetValue"
   >
     <template #left>
       <!-- @slot Use it to add something before the text. -->
@@ -27,7 +27,6 @@
         :value="value"
         :disabled="toValue(disabled)"
         v-bind="inputAttrs"
-        @click.stop
       />
       <!-- @slot Use it to add something instead of the text. -->
       <slot name="default" />

package/ui.data-table/components/TableRow.vue

@@ -12,7 +12,6 @@
         size="sm"
         :data-cy="`${dataCy}-body-checkbox`"
         v-bind="attrs.bodyCheckboxAttrs"
-        @click.stop
       />
     </td>
 

package/ui.dropdown-badge/index.vue

@@ -42,8 +42,7 @@
       :label-key="labelKey"
       :data-cy="`${dataCy}-item`"
       v-bind="listAttrs"
-      @mousedown.stop
-      @click.stop="onClickList"
+      @click="onClickList"
     />
   </div>
 </template>

package/ui.dropdown-button/index.stories.js

@@ -15,9 +15,9 @@ export default {
   args: {
     label: "Dropdown",
     options: [
-      { label: "option 1", value: "1" },
-      { label: "option 2", value: "2" },
-      { label: "option 3", value: "3" },
+      { label: "option 1", id: "1" },
+      { label: "option 2", id: "2" },
+      { label: "option 3", id: "3" },
     ],
   },
   argTypes: {

package/ui.dropdown-button/index.vue

@@ -46,8 +46,7 @@
       :data-cy="`${dataCy}-item`"
       tabindex="-1"
       v-bind="listAttrs"
-      @mousedown.stop
-      @click.stop="onClickList"
+      @click="onClickList"
     />
   </div>
 </template>

package/ui.dropdown-link/index.vue

@@ -24,7 +24,7 @@
             :color="color"
             :data-cy="`${dataCy}-caret`"
             v-bind="iconAttrs"
-            @click.stop="onClickLink"
+            @click="onClickLink"
           />
         </template>
       </ULink>
@@ -48,8 +48,7 @@
       :label-key="labelKey"
       :data-cy="`${dataCy}-item`"
       v-bind="listAttrs"
-      @mousedown.stop
-      @click.stop="onClickList"
+      @click="onClickList"
     />
   </div>
 </template>

package/ui.dropdown-list/index.vue

@@ -22,7 +22,7 @@
         <span
           v-if="!(option && (option.groupLabel || option.isSubGroup)) && !option.isHidden"
           v-bind="optionAttrs(optionHighlight(index, option))"
-          @click.stop="select(option)"
+          @click="select(option)"
           @mouseenter.self="pointerSet(index)"
         >
           <!--

package/ui.loader/configs/default.config.js

@@ -51,7 +51,7 @@ export default /*tw*/ {
   defaultVariants: {
     color: "brand",
     size: "md",
-    loading: true,
+    loading: false,
   },
   safelist: (colors) => [{ pattern: `bg-(${colors})-600` }],
 };

package/ui.loader/index.vue

@@ -1,6 +1,6 @@
 <template>
   <Transition v-bind="config.loaderTransition">
-    <div v-if="!loading" v-bind="loaderAttrs">
+    <div v-if="loading" v-bind="loaderAttrs">
       <div
         v-for="ellipse in ELLIPSES_AMOUNT"
         :key="ellipse"

package/ui.loader-rendering/configs/default.config.js

@@ -21,4 +21,5 @@ export default /*tw*/ {
   defaultVariants: {
     color: "brand",
   },
+  safelist: (colors) => [{ pattern: `bg-(${colors})-600` }],
 };

package/ui.loader-rendering/index.vue

@@ -1,7 +1,7 @@
 <template>
   <Transition v-bind="config.transition">
     <div v-if="showLoader" v-bind="wrapperAttrs">
-      <ULoader size="lg" :color="color === 'white' ? 'grayscale' : 'white'" />
+      <ULoader :loading="showLoader" size="lg" :color="color === 'white' ? 'grayscale' : 'white'" />
     </div>
   </Transition>
 </template>

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.203",
+  "version": "0.0.205",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -5089,7 +5089,7 @@
                 "kind": "expression",
                 "type": "boolean"
               },
-              "default": "true"
+              "default": "false"
             }
           ],
           "source": {