vueless 0.0.478-beta.1 → 0.0.478-beta.2

package/composablesTs/useUI.ts

@@ -94,26 +94,26 @@ export default function useUI<T>(
   /**
    * Get classes by given key (including CVA if config set).
    */
-  function getClasses(key: string, mutatedProps: UnknownObject) {
+  function getClasses(key: string, mutatedProps: UnknownObject): ComputedRef<string> {
     return computed(() => {
       const color = (toValue(mutatedProps)?.color as BrandColors) || props?.color;
-      const value = config.value[key] as CVA & NestedComponent;
+      const value = config.value[key] as (CVA & NestedComponent) | string;
 
       let classes = "";
 
-      if (isCVA(value)) {
+      if (typeof value === "object" && isCVA(value)) {
         classes = cva(value)({
           ...props,
           ...toValue(mutatedProps),
           ...(color ? { color: getColor(color) } : {}),
         });
-      } else if (value.component) {
-        // If the value of the key contains keys related to the nested component, it should be skipped.
-        // Probably this should be fixed later to be possible to extend key with nested component keys.
-        return "";
       }
 
-      return color ? setColor(classes, color) : value;
+      if (typeof value === "string") {
+        classes = value;
+      }
+
+      return color ? setColor(classes, color) : classes;
     });
   }
 
@@ -224,11 +224,8 @@ export default function useUI<T>(
     config,
     setColor,
     getColor,
-    getAttrs,
     getKeysAttrs,
     getExtendingKeysClasses,
-    isCVA,
-    isSystemKey,
     hasSlotContent,
   };
 }
@@ -528,9 +525,7 @@ function isSystemKey(key: string): boolean {
 /**
  * Check is config contains default CVA keys.
  */
-function isCVA(config: CVA | string): boolean {
-  if (typeof config !== "object") return false;
-
+function isCVA(config: UnknownObject): boolean {
   return Object.values(CVA_CONFIG_KEY).some((value) =>
     Object.keys(config).some((key) => key === value),
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.478-beta.1",
+  "version": "0.0.478-beta.2",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -32,8 +32,7 @@
     "build": "npx @vueless/web-types && node prepare.icons && storybook build --docs",
     "preview": "vite preview --host --outDir=storybook-static",
     "ts:check": "vue-tsc --build --force",
-    "ts:build": "vue-tsc --build --force --declaration --emitDeclarationOnly",
-    "release:prepare": "npx @vueless/web-types && node prepare.icons && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE web-types.json README.md dist/ && node prepare.package && npm run ts:build",
+    "release:prepare": "npx @vueless/web-types && node prepare.icons && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE web-types.json README.md dist/ && node prepare.package",
     "release:beta": "release-it --ci --npm.publish --preRelease=beta --increment=prerelease",
     "release:patch": "release-it patch --ci --npm.publish",
     "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",

package/ui.button/storybook/stories.js

@@ -34,7 +34,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UButton, URow, UCol },
   setup() {
     return { args, options: argTypes[args.enum].options };
@@ -54,7 +54,7 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   `,
 });
 
-const ColorTemplate = (args, { argTypes } = {}) => ({
+const ColorTemplate = (args, { argTypes }) => ({
   components: { UButton, URow, UCol },
   setup() {
     return {

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

@@ -34,7 +34,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { ULink, URow },
   setup() {
     function getText(value) {

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

@@ -41,7 +41,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UToggle, URow },
   setup() {
     const value = ref("");

package/ui.container-divider/storybook/stories.js

@@ -29,7 +29,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UDivider, URow },
   setup() {
     return {

package/ui.container-modal/storybook/stories.js

@@ -62,7 +62,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UModal, UButton, URow, UInput, UTextarea },
   setup() {
     function onClick(value) {

package/ui.container-modal-confirm/storybook/stories.js

@@ -57,7 +57,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UModalConfirm, UButton, URow },
   setup() {
     function onClick(value) {

package/ui.container-row/storybook/stories.js

@@ -36,7 +36,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UCol, URow, UInput, UButton },
   setup() {
     const isGapEnum = argTypes[args.enum].name === "gap";

package/ui.dropdown-badge/storybook/stories.js

@@ -43,7 +43,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UDropdownBadge, URow },
   setup() {
     return {

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

@@ -42,7 +42,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UDropdownButton, URow },
   setup() {
     return {
@@ -63,7 +63,7 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   `,
 });
 
-const VariantColorsTemplate = (args, { argTypes } = {}) => ({
+const VariantColorsTemplate = (args, { argTypes }) => ({
   components: { UDropdownButton, URow, UCol },
   setup() {
     return {

package/ui.dropdown-link/storybook/stories.js

@@ -45,7 +45,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UDropdownLink, URow },
   setup() {
     function getText(value) {

package/ui.dropdown-list/storybook/stories.js

@@ -43,7 +43,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UDropdownList, URow },
   setup() {
     return {

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

@@ -89,7 +89,7 @@ const ValueTypesTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UCheckbox, UCol },
   setup() {
     return {

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

@@ -54,7 +54,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UCheckboxGroup, UCol },
   setup() {
     return { args };

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

@@ -36,7 +36,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UCheckboxMultiState, URow },
   setup() {
     return {

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

@@ -33,7 +33,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UCol, UColorPicker },
   setup() {
     return {

package/ui.form-date-picker/storybook/stories.js

@@ -45,7 +45,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UDatePicker, URow },
   setup() {
     return {
@@ -57,7 +57,7 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
     <URow>
       <UDatePicker
         v-for="(option, index) in options"
-        open-direction-y="bottom" 
+        open-direction-y="bottom"
         :key="index"
         v-bind="args"
         :[args.enum]="option"

package/ui.form-date-picker-range/storybook/stories.js

@@ -50,7 +50,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UDatePickerRange, URow },
   setup() {
     return {

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

@@ -35,7 +35,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UInput, UCol },
   setup() {
     return {

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

@@ -42,7 +42,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UInputFile, UCol },
   setup() {
     return {

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

@@ -38,7 +38,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UInputMoney, UCol },
   setup() {
     return {

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

@@ -33,7 +33,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UInputNumber, UCol },
   setup() {
     return {

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

@@ -36,7 +36,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UInputRating, URow },
   setup() {
     return {

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

@@ -31,7 +31,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UInputSearch, URow },
   setup() {
     return {

package/ui.form-label/storybook/stories.js

@@ -38,7 +38,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { ULabel, UCol, UText },
   setup() {
     function getText(value, name) {

package/ui.form-radio-group/storybook/stories.js

@@ -54,7 +54,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { URadioGroup, UCol },
   setup() {
     return {

package/ui.form-select/storybook/stories.js

@@ -54,7 +54,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { USelect, URow },
   setup() {
     return {

package/ui.form-switch/storybook/stories.js

@@ -33,7 +33,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { USwitch, URow },
   setup() {
     return {

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

@@ -34,7 +34,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UTextarea, UCol },
   setup() {
     return {

package/ui.image-avatar/storybook/stories.js

@@ -31,7 +31,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UCol, URow, UAvatar },
   setup() {
     return {

package/ui.image-icon/storybook/stories.js

@@ -32,7 +32,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UIcon, URow },
   setup() {
     return {

package/ui.loader/storybook/stories.js

@@ -34,7 +34,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { ULoader, URow },
   setup() {
     return {

package/ui.loader-progress/storybook/stories.js

@@ -40,7 +40,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { ULoaderProgress, UButton, UCol, URow, UBadge },
   setup() {
     return {

package/ui.navigation-progress/storybook/stories.js

@@ -39,7 +39,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UCol, UButton, UProgress },
   setup() {
     args.progress = 10;

package/ui.navigation-tabs/storybook/stories.js

@@ -36,7 +36,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UTabs },
   setup() {
     return {

package/ui.other-dot/storybook/stories.js

@@ -31,7 +31,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UCol, URow, UDot, UBadge },
   setup() {
     return {

package/ui.text-alert/storybook/stories.js

@@ -36,7 +36,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UAlert, UCol },
   setup() {
     function getText(value) {

package/ui.text-badge/storybook/stories.js

@@ -34,7 +34,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const ColorsTemplate = (args, { argTypes } = {}) => ({
+const ColorsTemplate = (args, { argTypes }) => ({
   components: { UBadge, URow, UCol },
   setup() {
     return {
@@ -59,7 +59,7 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UBadge, URow },
   setup() {
     function getText(value) {
@@ -70,6 +70,14 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   },
   template: `
     <URow>
+      <UDropdownButton
+        label="Dropdown"
+        :options='[{"label":"option 1"},{"label":"option 2"},{"label":"option 3"}]'
+      variant="thirdary"
+      filled
+      >
+        fff
+      </UDropdownButton>
       <UBadge
         v-for="(option, index) in options"
         :key="index"

package/ui.text-block/storybook/stories.ts

@@ -32,7 +32,7 @@ const defaultTemplate = `
   </p>
 `;
 
-const DefaultTemplate: StoryFn<UTextArgs> = (args) => ({
+const DefaultTemplate: StoryFn<UTextArgs> = (args: UTextArgs) => ({
   components: { UText, URow },
   setup() {
     const slots = getSlotNames(UText.__name);
@@ -46,7 +46,7 @@ const DefaultTemplate: StoryFn<UTextArgs> = (args) => ({
   `,
 });
 
-const EnumVariantTemplate: StoryFn<UTextArgs> = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UTextArgs> = (args: UTextArgs, { argTypes }) => ({
   components: { UText, URow },
   setup() {
     return {

package/ui.text-empty/storybook/stories.js

@@ -35,7 +35,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UEmpty, URow },
   setup() {
     return {

package/ui.text-header/storybook/stories.js

@@ -32,7 +32,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UHeader, UCol },
   setup() {
     return {

package/ui.text-money/storybook/stories.js

@@ -46,7 +46,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UMoney, URow },
   setup() {
     const slots = getSlotNames(UMoney.__name);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.478-beta.1",
+  "version": "0.0.478-beta.2",
   "contributions": {
     "html": {
       "description-markup": "markdown",