vueless 0.0.2 → 0.0.3

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

@@ -4,6 +4,7 @@ import URow from "vueless/ui.container-row";
 import UDivider from "vueless/ui.container-divider";
 
 export default {
+  id: "5010",
   title: "Containers / Divider",
   component: UDivider,
   argTypes: {
@@ -21,7 +22,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
+const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { UDivider, URow },
   setup() {
     return {
@@ -34,8 +35,8 @@ const SizesTemplate = (args, { argTypes }) => ({
       <UDivider
         class="w-1/4"
         v-for="(size, index) in sizes"
-        :size="size"
         v-bind="args"
+        :size="size"
         :key="index"
       />
     </URow>
@@ -45,7 +46,7 @@ const SizesTemplate = (args, { argTypes }) => ({
   },
 });
 
-const VariantsTemplate = (args, { argTypes }) => ({
+const VariantTemplate = (args, { argTypes } = {}) => ({
   components: { UDivider, URow },
   setup() {
     return {
@@ -58,8 +59,8 @@ const VariantsTemplate = (args, { argTypes }) => ({
       <UDivider
         class="w-1/3"
         v-for="(variant, index) in variants"
-        :variant="variant"
         v-bind="args"
+        :variant="variant"
         :key="index"
       />
     </URow>
@@ -69,12 +70,28 @@ const VariantsTemplate = (args, { argTypes }) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const variants = VariantTemplate.bind({});
+variants.args = {};
+
 export const dashed = DefaultTemplate.bind({});
 dashed.args = { dashed: true };
 
 export const dotted = DefaultTemplate.bind({});
 dotted.args = { dotted: true };
 
+export const vertical = DefaultTemplate.bind({});
+vertical.args = {
+  vertical: true,
+  config: {
+    wrapper: {
+      base: "min-h-8",
+    },
+  },
+};
+
 export const noBorder = DefaultTemplate.bind({});
 noBorder.args = { noBorder: true };
 
@@ -84,8 +101,24 @@ noTopPadding.args = { noTopPadding: true };
 export const noBottomPadding = DefaultTemplate.bind({});
 noBottomPadding.args = { noBottomPadding: true };
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const noRightPadding = DefaultTemplate.bind({});
+noRightPadding.args = {
+  noRightPadding: true,
+  vertical: true,
+  config: {
+    wrapper: {
+      base: "min-h-8",
+    },
+  },
+};
 
-export const variants = VariantsTemplate.bind({});
-variants.args = {};
+export const noLeftPadding = DefaultTemplate.bind({});
+noLeftPadding.args = {
+  noLeftPadding: true,
+  vertical: true,
+  config: {
+    wrapper: {
+      base: "min-h-8",
+    },
+  },
+};

package/ui.container-divider/index.vue

@@ -1,201 +1,138 @@
 <template>
-  <div class="mono-divider-wrapper" :class="dividerWrapperClasses">
-    <div class="mono-divider" :class="dividerClasses" :data-cy="dataCy" />
+  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+    <div v-bind="dividerAttrs" />
+    <template v-if="label && !vertical">
+      <span v-bind="labelAttrs" v-text="label" />
+      <div v-bind="dividerAttrs" />
+    </template>
   </div>
 </template>
 
-<script>
-export default {
-  name: "UDivider",
-
-  props: {
-    /**
-     * Set padding size.
-     * @values xs, sm, md, lg, xl
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Set divider color.
-     * @values light, default, dark
-     */
-    variant: {
-      type: String,
-      default: "default",
-    },
-
-    /**
-     * Make line dashed.
-     */
-    dashed: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Make line dotted.
-     */
-    dotted: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Remove border (keeps only spacings).
-     */
-    noBorder: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Remove top padding.
-     */
-    noTopPadding: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Remove bottom padding.
-     */
-    noBottomPadding: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Set divider orientation to vertical.
-     */
-    vertical: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+<script setup>
+import UIService from "vueless/service.ui";
+
+import { UDivider } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UDivider", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Divider label.
+   */
+  label: {
+    type: String,
+    default: "",
   },
 
-  data: () => ({}),
+  /**
+   * Divider padding size.
+   * @values xs, sm, md, lg, xl
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UDivider).default.size,
+  },
 
-  computed: {
-    dividerWrapperClasses() {
-      const size = this.vertical ? `size-vertical-${this.size}` : `size-horisontal-${this.size}`;
-      const noTopPadding = this.noTopPadding ? "mono-divider-no-top-padding" : "";
-      const noBottomPadding = this.noBottomPadding ? "mono-divider-no-bottom-padding" : "";
+  /**
+   * Divider color.
+   * @values light, default, dark
+   */
+  variant: {
+    type: String,
+    default: UIService.get(defaultConfig, UDivider).default.variant,
+  },
 
-      return [size, noTopPadding, noBottomPadding];
-    },
+  /**
+   * Set line dashed.
+   */
+  dashed: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.dashed,
+  },
 
-    dividerClasses() {
-      const dashed = this.dashed ? "mono-divider-dashed" : "";
-      const dotted = this.dotted ? "mono-divider-dotted" : "";
-      const noBorder = this.noBorder ? "mono-divider-no-border" : "";
-      const vertical = this.vertical ? "mono-divider-vertical" : "mono-divider-horizontal";
-      const variant = `mono-divider-${this.variant}`;
+  /**
+   * Set line dotted.
+   */
+  dotted: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.dotted,
+  },
 
-      return [dashed, dotted, noBorder, variant, vertical];
-    },
+  /**
+   * Set divider orientation to vertical.
+   */
+  vertical: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.vertical,
+  },
+
+  /**
+   * Remove border (keeps only spacings).
+   */
+  noBorder: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.noBorder,
   },
-};
-</script>
 
-<style lang="postcss" scoped>
-.size-horisontal {
-  &-xs {
-    @apply py-2;
-  }
-
-  &-sm {
-    @apply py-3;
-  }
-
-  &-md {
-    @apply py-4;
-  }
-
-  &-lg {
-    @apply py-5;
-  }
-
-  &-xl {
-    @apply py-6;
-  }
-}
-
-.size-vertical {
-  &-xs {
-    @apply px-2;
-  }
-
-  &-sm {
-    @apply px-3;
-  }
-
-  &-md {
-    @apply px-4;
-  }
-
-  &-lg {
-    @apply px-5;
-  }
-
-  &-xl {
-    @apply px-6;
-  }
-}
-
-.mono-divider {
-  @apply border-transparent;
-
-  &-vertical {
-    @apply border-l;
-    @apply h-full;
-  }
-
-  &-horizontal {
-    @apply border-t;
-    @apply w-full;
-  }
-
-  &-light {
-    @apply border-gray-100;
-  }
-
-  &-default {
-    @apply border-gray-200;
-  }
-
-  &-dark {
-    @apply border-gray-300;
-  }
-
-  &-no-border {
-    @apply border-0;
-  }
-
-  &-dashed {
-    @apply border-dashed;
-  }
-
-  &-dotted {
-    @apply border-dotted;
-  }
-
-  &-no-top-padding {
-    @apply pt-0;
-  }
-
-  &-no-bottom-padding {
-    @apply pb-0;
-  }
-}
-</style>
+  /**
+   * Remove all paddings.
+   */
+  noPadding: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.noPadding,
+  },
+
+  /**
+   * Remove top padding.
+   */
+  noTopPadding: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.noTopPadding,
+  },
+
+  /**
+   * Remove bottom padding.
+   */
+  noBottomPadding: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.noBottomPadding,
+  },
+
+  /**
+   * Remove left padding.
+   */
+  noLeftPadding: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.noLeftPadding,
+  },
+
+  /**
+   * Remove right padding.
+   */
+  noRightPadding: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDivider).default.noRightPadding,
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const { wrapperAttrs, dividerAttrs, labelAttrs } = useAttrs(props);
+</script>

package/ui.container-group/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "vueless/service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.container-group/composables/attrs.composable.js

@@ -0,0 +1,44 @@
+import useUI from "vueless/composable.ui";
+import { cva } from "vueless/service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+  const { content, header } = config.value;
+
+  const cvaContent = cva({
+    base: content.base,
+    variants: content.variants,
+    compoundVariants: content.compoundVariants,
+  });
+
+  const cvaHeader = cva({
+    base: header.base,
+    variants: header.variants,
+    compoundVariants: header.compoundVariants,
+  });
+
+  const contentClasses = computed(() => cvaContent({ size: props.size }));
+
+  const headerClasses = computed(() => cvaHeader({ underlined: props.underlined }));
+
+  const wrapperAttrs = getAttrs("wrapper");
+  const upperlineAttrs = getAttrs("upperline", { isComponent: true });
+  const headerAttrs = getAttrs("header", { classes: headerClasses });
+  const headerFallbackAttrs = getAttrs("headerFallback");
+  const titleAttrs = getAttrs("title", { isComponent: true });
+  const underlineAttrs = getAttrs("underline", { isComponent: true });
+  const contentAttrs = getAttrs("content", { classes: contentClasses });
+
+  return {
+    contentAttrs,
+    headerAttrs,
+    wrapperAttrs,
+    headerFallbackAttrs,
+    titleAttrs,
+    upperlineAttrs,
+    underlineAttrs,
+  };
+}

package/ui.container-group/configs/default.config.js

@@ -0,0 +1,29 @@
+export default /*tw*/ {
+  wrapper: "",
+  upperline: "",
+  header: {
+    base: "flex items-center justify-between",
+    variants: {
+      underlined: {
+        false: "pb-6",
+      },
+    },
+  },
+  headerFallback: "flex items-center",
+  title: "pr-2",
+  underline: "pt-1.5",
+  content: {
+    variants: {
+      size: {
+        sm: "space-y-2",
+        md: "space-y-4",
+        lg: "space-y-6",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    upperlined: true,
+    underlined: false,
+  },
+};

package/ui.container-group/constants/index.js

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UGroup = "UGroup";

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

@@ -5,6 +5,7 @@ import UInput from "vueless/ui.form-input";
 import UButton from "vueless/ui.button";
 
 export default {
+  id: "5030",
   title: "Containers / Group",
   component: UGroup,
   args: {
@@ -43,16 +44,16 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-export const title = DefaultTemplate.bind({});
-title.args = {
+export const Default = DefaultTemplate.bind({});
+Default.args = {
   title: "Some title",
 };
 
-export const withoutUpperlined = DefaultTemplate.bind({});
-withoutUpperlined.args = { upperlined: false };
+export const upperlined = DefaultTemplate.bind({});
+upperlined.args = { upperlined: false, underlined: true };
 
 export const underlined = DefaultTemplate.bind({});
-underlined.args = { underlined: true, upperlined: false };
+underlined.args = { upperlined: true, underlined: false };
 
 export const slotDefault = DefaultTemplate.bind({});
 slotDefault.args = {
@@ -74,7 +75,7 @@ export const slotRight = DefaultTemplate.bind({});
 slotRight.args = {
   slotTemplate: `
     <template #right>
-      <UButton size="sm" text="Some button"/>
+      <UButton size="sm" label="Edit"/>
     </template>
   `,
 };