vueless 0.0.254 → 0.0.256

package/composable.ui/index.js

@@ -20,7 +20,7 @@ import {
 } from "../service.ui";
 
 import { cloneDeep } from "../service.helper";
-import { STRATEGY_TYPE, SYSTEM_CONFIG_KEY } from "../constants";
+import { STRATEGY_TYPE, CVA_CONFIG_KEY, SYSTEM_CONFIG_KEY } from "../constants";
 
 /**
   Merging component configs in a given sequence (bigger number = bigger priority):
@@ -88,12 +88,15 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
 
       const isTopLevelClassKey = configKey === (topLevelClassKey || firstClassKey);
       const attrClass = isTopLevelClassKey && !nestedComponent ? attrs.class : "";
-      // TODO: Uncomment and add into `cx` when getAttrs as a function will be resolved.
-      // const classes = toValue(options?.classes) || getBaseClasses(configKeyValue);
 
+      // TODO: remove `getBaseClasses(configKeyValue)` after migration to `setDynamicVars`
       vuelessAttrs.value = {
         ...commonAttrs,
-        class: cx([getBaseClasses(configKeyValue), toValue(options?.classes), attrClass]),
+        class: cx([
+          getBaseClasses(configKeyValue),
+          getBaseClasses(toValue(options?.classes)),
+          attrClass,
+        ]),
         ...((isObject && configAttrs) || {}),
       };
     }
@@ -106,6 +109,7 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
     getAttrs,
     getColor,
     setColor,
+    isCVA,
     isSystemKey,
     hasSlotContent,
   };
@@ -404,6 +408,19 @@ function isSystemKey(key) {
   );
 }
 
+/**
+ Check is config contains default CVA keys.
+ @param { Object | String } config
+ @returns { Boolean }
+ */
+function isCVA(config) {
+  if (typeof config !== "object") return false;
+
+  return Object.values(CVA_CONFIG_KEY).some((value) =>
+    Object.keys(config).some((key) => key === value),
+  );
+}
+
 /**
   Check if slot defined, and have a content.
   @param slot

package/package.json

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

package/ui.button/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 
 export default function useAttrs(props) {
   const slots = useSlots();
-  const { config, getAttrs, getColor, setColor, hasSlotContent, isSystemKey } = useUI(
+  const { config, getAttrs, getColor, setColor, hasSlotContent, isSystemKey, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,22 +15,19 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-            square: props.loading || props.square,
-            iconLeft: Boolean(props.iconLeft) || hasSlotContent(slots["icon-left"]),
-            iconRight: Boolean(props.iconRight) || hasSlotContent(slots["icon-right"]),
-          }),
-          props.color,
-        );
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+          square: props.loading || props.square,
+          iconLeft: Boolean(props.iconLeft) || hasSlotContent(slots["icon-left"]),
+          iconRight: Boolean(props.iconRight) || hasSlotContent(slots["icon-right"]),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });

package/ui.button/index.stories.js

@@ -44,10 +44,10 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
       <URow>
         <UButton
           v-for="(option, index) in options"
+          :key="index"
           v-bind="args"
           :[args.enum]="option"
           :label="option"
-          :key="index"
         />
       </URow>
     </UCol>

package/ui.button-link/composables/attrs.composable.js

@@ -6,7 +6,7 @@ import defaultConfig from "../configs/default.config";
 export default function useAttrs(props, { isActive, isExactActive }) {
   const slots = useSlots();
 
-  const { config, getAttrs, hasSlotContent, getColor, setColor, isSystemKey } = useUI(
+  const { config, getAttrs, hasSlotContent, getColor, setColor, isSystemKey, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -16,19 +16,16 @@ export default function useAttrs(props, { isActive, isExactActive }) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-          }),
-          props.color,
-        );
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });

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

@@ -53,10 +53,10 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
     <URow>
       <ULink
         v-for="(option, index) in options"
+        :key="index"
         v-bind="args"
         :[args.enum]="option"
         :label="prefixedOptions[index]"
-        :key="index"
       />
     </URow>
   `,

package/ui.button-toggle/composables/attrs.composable.js

@@ -4,7 +4,7 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+  const { config, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -14,15 +14,15 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return cva(value)({
+      if (isCVA(value)) {
+        value = cva(value)({
           ...props,
         });
       }
 
-      return "";
+      return value;
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });

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

@@ -37,8 +37,8 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UToggle
-      v-model="value"
       v-bind="args"
+      v-model="value"
       :options="OPTIONS"
     >
       ${args.slotTemplate || getSlotsFragment()}
@@ -62,8 +62,8 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
       <UToggle
         v-for="(option, index) in options"
         :key="index"
-        v-model="value"
         v-bind="args"
+        v-model="value"
         :[args.enum]="option"
         :label="option"
         :options="[

package/ui.button-toggle-item/composables/attrs.composable.js

@@ -4,7 +4,7 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
 export default function useAttrs(props, { isSelected, separated, variant }) {
-  const { config, getAttrs, isSystemKey, hasSlotContent } = useUI(
+  const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,10 +15,10 @@ export default function useAttrs(props, { isSelected, separated, variant }) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return cva(value)({
+      if (isCVA(value)) {
+        value = cva(value)({
           ...props,
           variant: toValue(variant),
           separated: toValue(separated),
@@ -26,7 +26,7 @@ export default function useAttrs(props, { isSelected, separated, variant }) {
         });
       }
 
-      return "";
+      return value;
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });

package/ui.button-toggle-item/index.stories.js

@@ -28,8 +28,12 @@ const DefaultTemplate = (args) => ({
     return { args, slots };
   },
   template: `
-    <UToggleItem v-bind="args" name="toggle" v-model="args.modelValue">
-      ${args.slotTemplate || getSlotsFragment()}
+    <UToggleItem
+        v-bind="args"
+        v-model="args.modelValue"
+        name="toggle"
+      >
+        ${args.slotTemplate || getSlotsFragment()}
     </UToggleItem>
   `,
 });

package/ui.container-card/index.stories.js

@@ -61,9 +61,9 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
     <URow>
       <UCard
         v-for="(option, index) in options"
+        :key="index"
         v-bind="args"
         :[args.enum]="option"
-        :key="index"
       >
         ${defaultTemplate}
       </UCard>

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

@@ -40,10 +40,7 @@ const DefaultTemplate = (args) => ({
     return { args, slots };
   },
   template: `
-    <UDropdownButton
-      v-bind="args"
-      v-model="args.modelValue"
-    >
+    <UDropdownButton v-bind="args">
       ${args.slotTemplate || getSlotsFragment()}
     </UDropdownButton>
   `,
@@ -83,12 +80,12 @@ const VariantColorsTemplate = (args, { argTypes } = {}) => ({
     <UCol>
       <URow v-for="(variant, index) in variants" :key="index">
         <UDropdownButton
-          v-for="(color, idx) in colors"
+          v-for="(color, index) in colors"
+          :key="index"
           v-bind="args"
           :color="color"
           :variant="variant"
           :label="color"
-          :key="idx"
         />
       </URow>
     </UCol>

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

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UCheckbox from "../ui.form-checkbox";
 import UCheckboxGroup from "../ui.form-checkbox-group";
@@ -14,23 +14,23 @@ export default {
   component: UCheckbox,
   args: {
     label: "Label",
-    value: {},
   },
   argTypes: {
     ...getArgTypes(UCheckbox.name),
+    modelValue: { control: { type: "boolean" } },
   },
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UCheckbox },
+  components: { UCheckbox, UBadge },
   setup() {
     const slots = getSlotNames(UCheckbox.name);
 
     return { args, slots };
   },
   template: `
-    <UCheckbox v-bind="args" v-model="args.value">
-      ${allSlotsFragment}
+    <UCheckbox v-bind="args" v-model="args.modelValue">
+      ${args.slotTemplate || getSlotsFragment()}
     </UCheckbox>
   `,
 });
@@ -89,48 +89,35 @@ const ValueTypesTemplate = (args) => ({
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UCheckbox, UCol },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <UCol gap="xl">
       <UCheckbox
-        v-for="(size, index) in sizes"
+        v-for="(option, index) in options"
         :key="index"
         v-bind="args"
-        v-model="args.value[size]"
-        :size="size"
-        :label="size"
+        :[args.enum]="option"
+        :label="option"
       />
     </UCol>
   `,
 });
 
-const SlotTemplate = (args) => ({
-  components: { UCheckbox, UBadge },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UCheckbox v-bind="args" v-model="args.value" description="hello">
-      ${args.slotTemplate}
-    </UCheckbox>
-  `,
-});
-
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const CustomValues = ValueTypesTemplate.bind({});
 CustomValues.args = {};
 
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = {};
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size" };
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
@@ -138,7 +125,7 @@ Disabled.args = { disabled: true };
 export const Description = DefaultTemplate.bind({});
 Description.args = { description: "Some description" };
 
-export const slotFooter = SlotTemplate.bind({});
+export const slotFooter = DefaultTemplate.bind({});
 slotFooter.args = {
   slotTemplate: `
     <template #footer>

package/ui.form-checkbox-group/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UCheckboxGroup from "../ui.form-checkbox-group";
 import UCheckbox from "../ui.form-checkbox";
@@ -29,7 +29,9 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UCheckboxGroup, UCheckbox, UAlert, URow },
   setup() {
-    return { args };
+    const slots = getSlotNames(UCheckboxGroup.name);
+
+    return { args, slots };
   },
   data() {
     return {
@@ -39,9 +41,7 @@ const DefaultTemplate = (args) => ({
   template: `
     <URow class="!flex-col">
       <UCheckboxGroup v-bind="args" v-model="value">
-        <template v-for="(radio, index) in args.options" :key="index">
-          <UCheckbox v-bind="radio"/>
-        </template>
+        ${args.slotTemplate || getSlotsFragment()}
       </UCheckboxGroup>
 
       <URow>
@@ -53,25 +53,29 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const OptionsTemplate = (args) => ({
-  components: { UCheckboxGroup, UCheckbox, UAlert, URow },
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+  components: { UCheckboxGroup, URow },
   setup() {
     return { args };
   },
   data() {
     return {
       value: args.value,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <URow class="!flex-col">
-      <UCheckboxGroup v-bind="args" v-model="value" :options="args.options" />
-
-      <URow>
-        <UAlert color="blue">
-          <p>Selected value: {{ value }}</p>
-        </UAlert>
-      </URow>
+      <UCheckboxGroup
+        v-for="(option, index) in options"
+        :key="option"
+        v-bind="args"
+        v-model="value"
+        :label="option"
+        :[args.enum]="option"
+        :options="args.options"
+        name="option"
+      />
     </URow>
   `,
 });
@@ -79,7 +83,11 @@ const OptionsTemplate = (args) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {
   name: "Default",
-  isDefaultStory: true,
+  slotTemplate: `
+    <template v-for="(radio, index) in args.options" :key="index">
+      <UCheckbox v-bind="radio"/>
+    </template>
+  `,
   options: [
     { name: "Default", label: "String", value: "One" },
     { name: "Default", label: "Boolean", value: false },
@@ -97,7 +105,7 @@ Default.args = {
   ],
 };
 
-export const Options = OptionsTemplate.bind({});
+export const Options = DefaultTemplate.bind({});
 Options.args = {
   name: "Options",
   options: [
@@ -109,68 +117,14 @@ Options.args = {
   ],
 };
 
-const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { UCheckboxGroup, URow },
-  setup() {
-    return { args };
-  },
-  data() {
-    return {
-      value: args.value,
-      colors: argTypes.color.options,
-    };
-  },
-  template: `
-    <URow class="!flex-col">
-      <UCheckboxGroup
-        v-bind="args"
-        v-for="color in colors"
-        :key="color"
-        :label="color"
-        :color="color"
-        :options="args.options"
-        name="color"
-        v-model="value"
-      />
-    </URow>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UCheckboxGroup, URow },
-  setup() {
-    return { args };
-  },
-  data() {
-    return {
-      value: args.value,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow class="!flex-col">
-      <UCheckboxGroup
-        v-bind="args"
-        v-for="size in sizes"
-        :key="size"
-        :label="size"
-        :size="size"
-        :options="args.options"
-        name="size"
-        v-model="value"
-      />
-    </URow>
-  `,
-});
-
 export const disabled = DefaultTemplate.bind({});
 disabled.args = { name: "Disabled", disabled: true };
 
 export const error = DefaultTemplate.bind({});
 error.args = { name: "Error", error: "some error" };
 
-export const Colors = ColorsTemplate.bind({});
-Colors.args = { name: "Colors" };
+export const Colors = EnumVariantTemplate.bind({});
+Colors.args = { enum: "color", name: "Colors" };
 
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = { name: "Sizes" };
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size", name: "Sizes" };

package/ui.form-checkbox-multi-state/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UCheckboxMultiState from "../ui.form-checkbox-multi-state";
 import URow from "../ui.container-row";
@@ -11,7 +11,6 @@ export default {
   title: "Form Inputs & Controls / Checkbox Multistate",
   component: UCheckboxMultiState,
   args: {
-    modelValue: false,
     options: [
       { value: false, label: "empty", icon: "", description: "checkbox empty" },
       { value: true, label: "selected", icon: "check", description: "checkbox selected" },
@@ -20,36 +19,41 @@ export default {
   },
   argTypes: {
     ...getArgTypes(UCheckboxMultiState.name),
+    modelValue: { control: { type: "boolean" } },
   },
 };
 
 const DefaultTemplate = (args) => ({
   components: { UCheckboxMultiState },
   setup() {
-    return { args };
+    const slots = getSlotNames(UCheckboxMultiState.name);
+
+    return { args, slots };
   },
   template: `
-    <UCheckboxMultiState v-bind="args" v-model="args.value" />
+    <UCheckboxMultiState v-bind="args" v-model="args.modelValue">
+      ${args.slotTemplate || getSlotsFragment()}
+    </UCheckboxMultiState>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UCheckboxMultiState, URow },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <URow>
       <UCheckboxMultiState
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        v-model="args.value"
-        :label="size"
+        v-for="(option, index) in options"
         :key="index"
+        v-bind="args"
+        v-model="args.modelValue"
+        :[args.enum]="option"
+        :label="option"
       />
     </URow>
   `,
@@ -58,5 +62,5 @@ 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" };

package/ui.form-color-picker/index.stories.js

@@ -11,7 +11,7 @@ export default {
   component: UColorPicker,
   args: {
     label: "Label",
-    value: "",
+    modelValue: "",
   },
   argTypes: {
     ...getArgTypes(UColorPicker.name),
@@ -26,7 +26,7 @@ const DefaultTemplate = (args) => ({
     return { args, slots };
   },
   template: `
-    <UColorPicker v-bind="args" v-model="args.value">
+    <UColorPicker v-bind="args" v-model="args.modelValue">
       ${args.slotTemplate || getSlotsFragment()}
     </UColorPicker>
   `,
@@ -46,7 +46,7 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
         v-for="(option, index) in options"
         :key="index"
         v-bind="args"
-        v-model="args.value"
+        v-model="args.modelValue"
         :[args.enum]="option"
         :name="option"
       />