vueless 0.0.250 → 0.0.252

package/package.json

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

package/ui.data-table/index.vue

@@ -192,6 +192,7 @@
                 bodyCellNestedExpandIconAttrs,
                 bodyCellNestedAttrs,
                 bodyCellPrimaryAttrs,
+                bodyCheckboxAttrs,
               }"
               @click="onClickRow"
               @toggle-row-visibility="onToggleRowVisibility"
@@ -511,6 +512,7 @@ const {
   hasSlotContent,
   headerAttrs,
   bodyCellPrimaryAttrs,
+  bodyCheckboxAttrs,
 } = useAttrs(props, {
   tableRows,
   isShownActionsHeader,

package/ui.form-input/index.stories.js

@@ -1,10 +1,9 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UInput from "../ui.form-input";
 import UIcon from "../ui.image-icon";
 import UButton from "../ui.button";
 import UCol from "../ui.container-col";
-import URow from "../ui.container-row";
 
 /**
  * The `UInput` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-input)
@@ -23,7 +22,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UInput },
+  components: { UInput, UIcon, UButton },
   setup() {
     const slots = getSlotNames(UInput.name);
 
@@ -31,81 +30,27 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UInput v-bind="args" v-model="args.modelValue">
-      ${allSlotsFragment}
-    </UInput>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UInput, UIcon, UButton },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UInput v-bind="args">
-      ${args.slotTemplate}
+      ${args.slotTemplate || getSlotsFragment()}
     </UInput>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UInput, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UInput
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const ValidationRuleTemplate = (args, { argTypes } = {}) => ({
-  components: { UInput, URow },
-  setup() {
-    return {
-      args,
-      rules: argTypes.validationRule.options,
-    };
-  },
-  template: `
-    <URow>
-      <UInput
-        v-for="(rule, index) in rules"
-        v-bind="args"
-        :validationRule="rule"
-        :key="index"
-        :description="rule"
-      />
-    </URow>
-  `,
-});
-
-const LabelPlacementTemplate = (args) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UInput, UCol },
   setup() {
     return {
       args,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
-    <UCol gap="xl">
+    <UCol>
       <UInput
+        v-for="(option, index) in options"
         v-bind="args"
-        label-align="top"
-      />
-
-      <UInput
-        v-bind="args"
-        label-align="topInside"
+        :[args.enum]="option"
+        :label="option"
+        :key="index"
       />
     </UCol>
   `,
@@ -135,14 +80,14 @@ noAutocomplete.args = { noAutocomplete: true };
 export const typePassword = DefaultTemplate.bind({});
 typePassword.args = { type: "password" };
 
-export const labelPlacement = LabelPlacementTemplate.bind({});
-labelPlacement.args = {};
+export const labelPlacement = EnumVariantTemplate.bind({});
+labelPlacement.args = { enum: "labelAlign" };
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size" };
 
-export const validationRules = ValidationRuleTemplate.bind({});
-validationRules.args = {};
+export const validationRules = EnumVariantTemplate.bind({});
+validationRules.args = { enum: "validationRule" };
 
 export const iconLeft = DefaultTemplate.bind({});
 iconLeft.args = {
@@ -154,7 +99,7 @@ iconRight.args = {
   iconRight: "star",
 };
 
-export const iconLeftSlot = SlotTemplate.bind({});
+export const iconLeftSlot = DefaultTemplate.bind({});
 iconLeftSlot.args = {
   slotTemplate: `
     <template #icon-left>
@@ -166,7 +111,7 @@ iconLeftSlot.args = {
   `,
 };
 
-export const iconRightSlot = SlotTemplate.bind({});
+export const iconRightSlot = DefaultTemplate.bind({});
 iconRightSlot.args = {
   slotTemplate: `
     <template #icon-right>
@@ -178,7 +123,7 @@ iconRightSlot.args = {
   `,
 };
 
-export const leftSlot = SlotTemplate.bind({});
+export const leftSlot = DefaultTemplate.bind({});
 leftSlot.args = {
   slotTemplate: `
     <template #left>
@@ -187,7 +132,7 @@ leftSlot.args = {
   `,
 };
 
-export const rightSlot = SlotTemplate.bind({});
+export const rightSlot = DefaultTemplate.bind({});
 rightSlot.args = {
   slotTemplate: `
     <template #right>

package/ui.form-input-file/index.stories.js

@@ -1,7 +1,7 @@
-import { getArgTypes, allSlotsFragment, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UInputFile from "../ui.form-input-file";
-import URow from "../ui.container-row";
+import UCol from "../ui.container-col";
 
 /**
  * The `UInputFile` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-input-file)
@@ -37,71 +37,29 @@ const DefaultTemplate = (args) => ({
       v-model="files"
       v-model:error="error"
     >
-      ${allSlotsFragment}
+      ${args.slotTemplate || getSlotsFragment()}
     </UInputFile>
   `,
 });
 
-const SlotTemplate = (args) => ({
-  components: { UInputFile },
-  setup() {
-    return { args };
-  },
-  data() {
-    return {
-      files: [],
-      error: args.error || "",
-    };
-  },
-  template: `
-    <UInputFile
-      v-bind="args"
-      v-model="files"
-      v-model:error="error"
-    >
-      ${args.slotTemplate}
-    </UInputFile>
-  `,
-});
-
-const LabelAlignTemplate = (args, { argTypes } = {}) => ({
-  components: { UInputFile, URow },
-  setup() {
-    return {
-      args,
-      alignOptions: argTypes.labelAlign.options,
-    };
-  },
-  template: `
-    <URow class="!flex-col" gap="xl">
-      <div v-for="(align, index) in alignOptions" :key="index">
-        <UInputFile
-          :label-align="align"
-          v-bind="args"
-          :label="align"
-        />
-      </div>
-    </URow>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UInputFile, URow },
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+  components: { UInputFile, UCol },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
-    <URow>
-      <div v-for="(size, index) in sizes" :key="index">
+    <UCol gap="xl">
+      <div v-for="(option, index) in options" :key="index">
         <UInputFile
-          :size="size"
+          :[args.enum]="option"
           v-bind="args"
+          :label="option"
         />
       </div>
-    </URow>
+    </UCol>
   `,
 });
 
@@ -117,17 +75,17 @@ allowedFileTypes.args = { allowedFileTypes: ["png", "jpeg"], label: "Allow only
 export const error = DefaultTemplate.bind({});
 error.args = { error: "some error" };
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size" };
 
-export const labelAlign = LabelAlignTemplate.bind({});
-labelAlign.args = {};
+export const labelAlign = EnumVariantTemplate.bind({});
+labelAlign.args = { enum: "labelAlign" };
 
-export const slotLeft = SlotTemplate.bind({});
+export const slotLeft = DefaultTemplate.bind({});
 slotLeft.args = {
   slotTemplate: `
     <template #left>
-      🥸
+      🤘
     </template>
   `,
 };

package/ui.form-input-money/index.stories.js

@@ -1,8 +1,7 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UInputMoney from "../ui.form-input-money";
-import URow from "../ui.container-row";
-// import UCol from "../ui.container-col";
+import UCol from "../ui.container-col";
 
 /**
  * The `UInputMoney` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-input-money)
@@ -32,67 +31,43 @@ const DefaultTemplate = (args) => ({
       v-bind="args"
       v-model="args.inputValue"
     >
-      ${allSlotsFragment}
+      ${args.slotTemplate || getSlotsFragment()}
     </UInputMoney>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UInputMoney, URow },
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+  components: { UInputMoney, UCol },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
-    <URow>
+    <UCol>
       <UInputMoney
-        v-for="(size, index) in sizes"
+        v-for="(option, index) in options"
         v-bind="args"
-        :size="size"
+        :[args.enum]="option"
+        :label="option"
         :key="index"
       />
-    </URow>
+    </UCol>
   `,
 });
 
-// TODO: Rewrite to labelAlign
-// const LabelPlacementTemplate = (args) => ({
-//   components: { UInputMoney, UCol },
-//   setup() {
-//     return {
-//       args,
-//     };
-//   },
-//   template: `
-//     <UCol gap="xl">
-//       <UInputMoney
-//         v-bind="args"
-//         :label-outside="true"
-//         label="top"
-//       />
-//
-//       <UInputMoney
-//         v-bind="args"
-//         :label-outside="false"
-//         label="topInside"
-//       />
-//     </UCol>
-//   `,
-// });
-
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size" };
 
 export const symbol = DefaultTemplate.bind({});
 symbol.args = { symbol: "€" };
 
-// export const labelOutside = LabelPlacementTemplate.bind({});
-// labelOutside.args = {};
+export const labelAlign = EnumVariantTemplate.bind({});
+labelAlign.args = { enum: "labelAlign" };
 
 export const placeholder = DefaultTemplate.bind({});
 placeholder.args = { placeholder: "Placeholder" };

package/ui.form-input-number/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UInputNumber from "../ui.form-input-number";
 import UCol from "../ui.container-col";
@@ -19,7 +19,9 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UInputNumber },
   setup() {
-    return { args };
+    const slots = getSlotNames(UInputNumber.name);
+
+    return { args, slots };
   },
   data() {
     return {
@@ -27,16 +29,18 @@ const DefaultTemplate = (args) => ({
     };
   },
   template: `
-    <UInputNumber v-model="count" v-bind="args" />
+    <UInputNumber v-model="count" v-bind="args">
+      ${args.slotTemplate || getSlotsFragment()}
+    </UInputNumber>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UInputNumber, UCol },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   data() {
@@ -51,9 +55,9 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
   template: `
     <UCol gap="xl">
       <UInputNumber
-        v-for="(size, index) in sizes"
+        v-for="(option, index) in options"
         v-bind="args"
-        :size="size"
+        :[args.enum]="option"
         :key="index"
         :label="sizeValues[index].label"
         v-model="sizeValues[index].count"
@@ -79,8 +83,9 @@ label.args = {
   label: "Year",
 };
 
-export const sizes = SizesTemplate.bind({});
+export const sizes = EnumVariantTemplate.bind({});
 sizes.args = {
+  enum: "size",
   value: 1,
   step: 1,
   min: 1,

package/ui.form-input-rating/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UInputRating from "../ui.form-input-rating";
 import URow from "../ui.container-row";
@@ -31,42 +31,27 @@ const DefaultTemplate = (args) => ({
       v-bind="args"
       v-model="args.modelValue"
     >
-      ${allSlotsFragment}
+      ${args.slotTemplate || getSlotsFragment()}
     </UInputRating>
   `,
 });
 
-const SlotTemplate = (args) => ({
-  components: { UInputRating },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UInputRating
-      v-bind="args"
-      v-model="args.modelValue"
-    >
-      ${args.slotTemplate}
-    </UInputRating>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UInputRating, URow },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <URow gap="2xl">
       <UInputRating
-        v-for="(size, index) in sizes"
+        v-for="(option, index) in options"
         :key="index"
         v-bind="args"
         v-model="args.modelValue"
-        :size="size"
+        :[args.enum]="option"
       />
     </URow>
   `,
@@ -75,8 +60,8 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size" };
 
 export const starAmount = DefaultTemplate.bind({});
 starAmount.args = { value: 4, stars: 7 };
@@ -96,7 +81,7 @@ withCounter.args = { counter: true };
 export const withTotal = DefaultTemplate.bind({});
 withTotal.args = { total: 250 };
 
-export const slotCounter = SlotTemplate.bind({});
+export const slotCounter = DefaultTemplate.bind({});
 slotCounter.args = {
   slotTemplate: `
     <template #counter="{counter}">
@@ -105,7 +90,7 @@ slotCounter.args = {
   `,
 };
 
-export const slotTotal = SlotTemplate.bind({});
+export const slotTotal = DefaultTemplate.bind({});
 slotTotal.args = {
   total: 250,
   slotTemplate: `

package/ui.form-input-search/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UInputSearch from "../ui.form-input-search";
 import UButton from "../ui.button";
@@ -17,51 +17,34 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UInputSearch },
+  components: { UInputSearch, UButton },
   setup() {
     const slots = getSlotNames(UInputSearch.name);
 
-    return {
-      args,
-      slots,
-    };
-  },
-  template: `
-    <UInputSearch v-bind="args" v-model="args.modelValue">
-      ${allSlotsFragment}
-    </UInputSearch>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UInputSearch, UButton },
-  setup() {
-    return {
-      args,
-    };
+    return { args, slots };
   },
   template: `
     <UInputSearch v-bind="args" v-model="args.modelValue">
-      ${args.slotTemplate || ""}
+      ${args.slotTemplate || getSlotsFragment()}
     </UInputSearch>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UInputSearch, URow },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <URow>
       <UInputSearch
-        v-for="(size, index) in sizes"
+        v-for="(option, index) in options"
         v-bind="args"
         v-model="args.modelValue"
-        :size="size"
+        :[args.enum]="option"
         :key="index"
       >
       </UInputSearch>
@@ -75,15 +58,15 @@ Default.args = {};
 export const searchButton = DefaultTemplate.bind({});
 searchButton.args = { searchButtonLabel: "Search" };
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size" };
 
-export const slotLeft = SlotTemplate.bind({});
+export const slotLeft = DefaultTemplate.bind({});
 slotLeft.args = {
   slotTemplate: `
     <template #left>
       <UButton
-        label="filter"
+        label="Filter"
         variant="thirdary"
         filled
         no-ring

package/ui.form-textarea/index.stories.js

@@ -1,8 +1,7 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UTextarea from "../ui.form-textarea";
 import UIcon from "../ui.image-icon";
-import URow from "../ui.container-row";
 import UCol from "../ui.container-col";
 
 /**
@@ -22,7 +21,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UTextarea },
+  components: { UTextarea, UIcon },
   setup() {
     const slots = getSlotNames(UTextarea.name);
 
@@ -32,65 +31,28 @@ const DefaultTemplate = (args) => ({
     <UTextarea
       v-bind="args"
     >
-      ${allSlotsFragment}
+      ${args.slotTemplate || getSlotsFragment()}
     </UTextarea>
   `,
 });
 
-const SlotTemplate = (args) => ({
-  components: { UTextarea, UIcon },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UTextarea
-      v-bind="args"
-    >
-      ${args.slotTemplate}
-    </UTextarea>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UTextarea, URow },
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+  components: { UTextarea, UCol },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
-    <URow>
-      <div class="w-1/3" v-for="(size, index) in sizes" :key="index">
+    <UCol>
+      <div class="w-1/3" v-for="(option, index) in options" :key="index">
         <UTextarea
           v-bind="args"
-          :size="size"
+          :[args.enum]="option"
+          :label="option"
         />
       </div>
-    </URow>
-  `,
-});
-
-const LabelPlacementTemplate = (args) => ({
-  components: { UTextarea, UCol },
-  setup() {
-    return {
-      args,
-    };
-  },
-  template: `
-    <UCol gap="xl">
-      <UTextarea
-        v-bind="args"
-        label-align="top"
-        label="top"
-      />
-
-      <UTextarea
-        v-bind="args"
-        label-align="topInside"
-        label="topInside"
-      />
     </UCol>
   `,
 });
@@ -98,8 +60,8 @@ const LabelPlacementTemplate = (args) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const labelPlacement = LabelPlacementTemplate.bind({});
-labelPlacement.args = {};
+export const labelPlacement = EnumVariantTemplate.bind({});
+labelPlacement.args = { enum: "labelAlign" };
 
 export const placeholder = DefaultTemplate.bind({});
 placeholder.args = { placeholder: "some placeholder text" };
@@ -122,10 +84,10 @@ readonly.args = { readonly: true, value: "some value for read" };
 export const noAutocomplete = DefaultTemplate.bind({});
 noAutocomplete.args = { noAutocomplete: true };
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size" };
 
-export const slotLeft = SlotTemplate.bind({});
+export const slotLeft = DefaultTemplate.bind({});
 slotLeft.args = {
   slotTemplate: `
     <template #left>
@@ -137,7 +99,7 @@ slotLeft.args = {
   `,
 };
 
-export const slotRight = SlotTemplate.bind({});
+export const slotRight = DefaultTemplate.bind({});
 slotRight.args = {
   slotTemplate: `
     <template #right>

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.250",
+  "version": "0.0.252",
   "contributions": {
     "html": {
       "description-markup": "markdown",