vueless 0.0.394 → 0.0.395

package/package.json

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

package/ui.button/UButton.vue

@@ -233,7 +233,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.button-link/ULink.vue

@@ -239,7 +239,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.button-toggle/UToggle.vue

@@ -158,7 +158,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

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

@@ -103,7 +103,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.container-card/UCard.vue

@@ -26,7 +26,7 @@
       <slot />
     </div>
 
-    <UDivider v-if="isShownFooter" no-padding v-bind="dividerAttrs" />
+    <UDivider v-if="isShownFooter" padding="none" v-bind="dividerAttrs" />
 
     <div v-if="isShownFooter" v-bind="footerAttrs">
       <!-- @slot Use it to add something to the left side of the footer. -->
@@ -68,7 +68,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.container-col/UCol.vue

@@ -68,7 +68,7 @@ const props = defineProps({
   },
 
   /**
-   *Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.container-divider/UDivider.vue

@@ -1,10 +1,7 @@
 <template>
   <div :data-test="dataTest" v-bind="wrapperAttrs">
     <div v-bind="dividerAttrs" />
-    <template v-if="label && !vertical">
-      <span v-bind="labelAttrs" v-text="label" />
-      <div v-bind="dividerAttrs" />
-    </template>
+    <span v-if="label" v-bind="labelAttrs" v-text="label" />
   </div>
 </template>
 
@@ -44,6 +41,15 @@ const props = defineProps({
     default: getDefault(defaultConfig, UDivider).variant,
   },
 
+  /**
+   * Set padding around the Divider.
+   * @values none, before, after, all
+   */
+  padding: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UDivider).padding,
+  },
+
   /**
    * Set line dashed.
    */
@@ -61,7 +67,7 @@ const props = defineProps({
   },
 
   /**
-   * Set divider orientation to vertical.
+   * Set divider vertically orientated.
    */
   vertical: {
     type: Boolean,
@@ -77,47 +83,7 @@ const props = defineProps({
   },
 
   /**
-   * Remove all paddings.
-   */
-  noPadding: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDivider).noPadding,
-  },
-
-  /**
-   * Remove top padding.
-   */
-  noTopPadding: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDivider).noTopPadding,
-  },
-
-  /**
-   * Remove bottom padding.
-   */
-  noBottomPadding: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDivider).noBottomPadding,
-  },
-
-  /**
-   * Remove left padding.
-   */
-  noLeftPadding: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDivider).noLeftPadding,
-  },
-
-  /**
-   * Remove right padding.
-   */
-  noRightPadding: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDivider).noRightPadding,
-  },
-
-  /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.container-divider/config.js

@@ -1,12 +1,16 @@
 export default /*tw*/ {
   wrapper: {
+    base: "flex",
     variants: {
       vertical: {
-        true: "h-full flex",
-        false: "w-full",
+        true: "h-full w-fit",
+        false: "w-full h-fit",
       },
       label: {
-        true: "flex items-center",
+        true: "items-center justify-center",
+      },
+      padding: {
+        none: "p-0",
       },
     },
     compoundVariants: [
@@ -15,16 +19,15 @@ export default /*tw*/ {
       { vertical: false, size: "md", class: "py-4" },
       { vertical: false, size: "lg", class: "py-5" },
       { vertical: false, size: "xl", class: "py-6" },
+      { vertical: false, padding: "after", class: "pt-0" },
+      { vertical: false, padding: "before", class: "pb-0" },
       { vertical: true, size: "xs", class: "px-2" },
       { vertical: true, size: "sm", class: "px-3" },
       { vertical: true, size: "md", class: "px-4" },
       { vertical: true, size: "lg", class: "px-5" },
       { vertical: true, size: "xl", class: "px-6" },
-      { noPadding: true, class: "p-0" },
-      { noTopPadding: true, class: "pt-0" },
-      { noLeftPadding: true, class: "pl-0" },
-      { noRightPadding: true, class: "pr-0" },
-      { noBottomPadding: true, class: "pb-0" },
+      { vertical: true, padding: "after", class: "pl-0" },
+      { vertical: true, padding: "before", class: "pr-0" },
     ],
   },
   divider: {
@@ -35,12 +38,9 @@ export default /*tw*/ {
         default: "border-gray-200",
         dark: "border-gray-300",
       },
-      label: {
-        true: "w-full",
-      },
       vertical: {
-        true: "border-l",
-        false: "border-t",
+        true: "border-l h-full",
+        false: "border-t w-full",
       },
       dashed: {
         true: "border-dashed",
@@ -49,31 +49,30 @@ export default /*tw*/ {
         true: "border-dotted",
       },
       noBorder: {
-        true: "border-0",
+        true: "border-transparent",
       },
     },
   },
   label: {
-    base: "px-2 shrink-0 text-sm",
+    base: "absolute p-2 rounded-dynamic bg-white shrink-0 text-sm w-fit",
     variants: {
       variant: {
         light: "text-gray-400",
         default: "text-gray-500",
         dark: "text-gray-600",
       },
+      vertical: {
+        true: "transform origin-center rotate-90",
+      },
     },
   },
   defaults: {
     variant: "default",
+    padding: "all",
     size: "md",
     dashed: false,
     dotted: false,
     vertical: false,
     noBorder: false,
-    noPadding: false,
-    noTopPadding: false,
-    noBottomPadding: false,
-    noLeftPadding: false,
-    noRightPadding: false,
   },
 };

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

@@ -59,6 +59,9 @@ Sizes.args = { enum: "size" };
 export const Variants = EnumVariantTemplate.bind({});
 Variants.args = { enum: "variant" };
 
+export const Padding = EnumVariantTemplate.bind({});
+Padding.args = { enum: "padding" };
+
 export const Dashed = DefaultTemplate.bind({});
 Dashed.args = { dashed: true };
 
@@ -68,40 +71,11 @@ Dotted.args = { dotted: true };
 export const Vertical = DefaultTemplate.bind({});
 Vertical.args = {
   vertical: true,
+  label: "label",
   config: {
-    wrapper: {
-      base: "min-h-8",
-    },
+    wrapper: "!h-32",
   },
 };
 
 export const NoBorder = DefaultTemplate.bind({});
-NoBorder.args = { noBorder: true };
-
-export const NoTopPadding = DefaultTemplate.bind({});
-NoTopPadding.args = { noTopPadding: true };
-
-export const NoBottomPadding = DefaultTemplate.bind({});
-NoBottomPadding.args = { noBottomPadding: true };
-
-export const NoRightPadding = DefaultTemplate.bind({});
-NoRightPadding.args = {
-  noRightPadding: true,
-  vertical: true,
-  config: {
-    wrapper: {
-      base: "min-h-8",
-    },
-  },
-};
-
-export const NoLeftPadding = DefaultTemplate.bind({});
-NoLeftPadding.args = {
-  noLeftPadding: true,
-  vertical: true,
-  config: {
-    wrapper: {
-      base: "min-h-8",
-    },
-  },
-};
+NoBorder.args = { label: "label", noBorder: true };

package/ui.container-divider/useAttrs.js

@@ -1,3 +1,4 @@
+import { computed } from "vue";
 import useUI from "../composables/useUI.js";
 
 import defaultConfig from "./config.js";
@@ -5,7 +6,11 @@ import defaultConfig from "./config.js";
 export default function useAttrs(props) {
   const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs();
+  const mutatedProps = computed(() => ({
+    label: Boolean(props.label),
+  }));
+
+  const keysAttrs = getKeysAttrs(mutatedProps);
 
   return {
     config,

package/ui.container-group/UGroup.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-bind="wrapperAttrs" :data-test="dataTest">
     <template v-if="title">
-      <UDivider v-if="upperlined" size="xl" no-top-padding v-bind="upperlineAttrs" />
+      <UDivider v-if="upperlined" size="xl" padding="after" v-bind="upperlineAttrs" />
 
       <div v-bind="headerAttrs">
         <!-- @slot Use it to add something left side of the header. -->
@@ -77,7 +77,7 @@ const props = defineProps({
   },
 
   /**
-   *Component ui config object.
+   *Component config object.
    */
   config: {
     type: Object,

package/ui.container-modal/UModal.vue

@@ -82,13 +82,7 @@
           <UDivider v-if="!isExistFooter || !noDivider" no-border v-bind="dividerSpacingAttrs" />
 
           <template v-if="isExistFooter">
-            <UDivider
-              v-if="!noDivider"
-              variant="dark"
-              no-bottom-padding
-              no-top-padding
-              v-bind="dividerAttrs"
-            />
+            <UDivider v-if="!noDivider" variant="dark" padding="none" v-bind="dividerAttrs" />
 
             <div v-bind="footerAttrs">
               <div v-if="hasSlotContent($slots['footer-left'])" v-bind="footerLeftAttrs">
@@ -226,7 +220,7 @@ const props = defineProps({
   },
 
   /**
-   * Set component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.container-modal-confirm/UModalConfirm.vue

@@ -136,7 +136,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.container-page/UPage.vue

@@ -175,7 +175,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.container-row/URow.vue

@@ -76,7 +76,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.data-list/UDataList.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-bind="wrapperAttrs">
-    <UDivider v-if="upperlined" size="xl" no-top-padding v-bind="dividerAttrs" />
+    <UDivider v-if="upperlined" size="xl" padding="after" v-bind="dividerAttrs" />
 
     <UEmpty
       v-if="!hideEmptyStateForNesting && !list?.length"
@@ -242,7 +242,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.data-table/UTable.vue

@@ -362,7 +362,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -174,7 +174,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.dropdown-button/UDropdownButton.vue

@@ -200,7 +200,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.dropdown-link/UDropdownLink.vue

@@ -194,7 +194,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.dropdown-list/UDropdownList.vue

@@ -186,7 +186,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.form-calendar/UCalendar.vue

@@ -270,7 +270,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.form-checkbox/UCheckbox.vue

@@ -178,7 +178,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.form-checkbox-group/UCheckboxGroup.vue

@@ -120,7 +120,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.form-checkbox-multi-state/UCheckboxMultiState.vue

@@ -85,7 +85,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.form-color-picker/UColorPicker.vue

@@ -139,7 +139,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.form-date-picker/UDatePicker.vue

@@ -251,7 +251,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

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

@@ -345,7 +345,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.form-input/UInput.vue

@@ -311,7 +311,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.form-input-file/UInputFile.vue

@@ -201,7 +201,7 @@ const props = defineProps({
     default: "",
   },
   /**
-   * Sets component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.form-input-money/UInputMoney.vue

@@ -210,7 +210,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.form-input-number/UInputNumber.vue

@@ -111,7 +111,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.form-input-rating/UInputRating.vue

@@ -148,7 +148,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.form-input-search/UInputSearch.vue

@@ -213,7 +213,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.form-label/ULabel.vue

@@ -150,7 +150,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.form-radio/URadio.vue

@@ -147,7 +147,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.form-radio-group/URadioGroup.vue

@@ -116,7 +116,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.form-select/USelect.vue

@@ -518,7 +518,7 @@ const props = defineProps({
   },
 
   /**
-   * Component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.form-switch/USwitch.vue

@@ -136,7 +136,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,

package/ui.form-textarea/UTextarea.vue

@@ -179,7 +179,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets component ui config object.
+   * Component config object.
    */
   config: {
     type: Object,