vueless 0.0.2 → 0.0.3

package/ui.dropdown-item/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.dropdown-item/composables/attrs.composable.js

@@ -0,0 +1,13 @@
+import useUI from "vueless/composable.ui";
+
+import defaultConfig from "../configs/default.config";
+
+export function useAttrs(props) {
+  const { getAttrs } = useUI(defaultConfig, () => props.config);
+
+  const wrapperAttrs = getAttrs("wrapper");
+
+  return {
+    wrapperAttrs,
+  };
+}

package/ui.dropdown-item/configs/default.config.js

@@ -0,0 +1,16 @@
+export default /*tw*/ {
+  wrapper: {
+    base: `
+      text-base p-3
+      whitespace-nowrap text-left font-normal text-gray-900 cursor-pointer
+      first:rounded-t-lg last:rounded-b-lg hover:bg-gray-100 active:bg-gray-200 active:font-medium disabled:bg-gray-500
+   `,
+    variants: {
+      size: {
+        sm: "text-sm p-2",
+        md: "text-base p-3",
+        lg: "text-lg p-4",
+      },
+    },
+  },
+};

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

@@ -3,10 +3,11 @@ import { getArgTypes } from "vueless/service.storybook";
 import UDropdownItem from "vueless/ui.dropdown-item";
 
 export default {
+  id: "2040",
   title: "Dropdowns / Dropdown Item",
   component: UDropdownItem,
   args: {
-    text: "Dropdown Item",
+    label: "Dropdown Item",
   },
   argTypes: {
     ...getArgTypes(UDropdownItem.name),

package/ui.dropdown-item/index.vue

@@ -1,70 +1,53 @@
 <template>
-  <div class="mono-dropdown-item" :data-cy="dataCy" @click="onClick">
-    {{ text }}
+  <div :data-cy="dataCy" v-bind="wrapperAttrs" @click="onClick">
+    <template v-if="label">{{ label }}</template>
+    <slot />
   </div>
 </template>
 
-<script>
-export default {
-  name: "UDropdownItem",
+<script setup>
+import { inject } from "vue";
+import { useAttrs } from "./composables/attrs.composable";
 
-  inject: ["hideDropdownOptions"],
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UDropdownItem", inheritAttrs: false });
 
-  props: {
-    /**
-     * Set dropdown item text.
-     */
-    text: {
-      type: String,
-      required: true,
-    },
+const hideDropdownOptions = inject("hideDropdownOptions", null);
 
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+const props = defineProps({
+  /**
+   * Set dropdown item label.
+   */
+  label: {
+    type: String,
+    default: "",
   },
 
-  emits: ["click"],
-
-  methods: {
-    onClick() {
-      // invokes click event on current item
-      this.$emit("click");
-
-      if (this.hideDropdownOptions) this.hideDropdownOptions();
-    },
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
   },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-dropdown-item {
-  @apply whitespace-nowrap text-left text-base font-normal text-gray-900;
-  @apply p-3;
-  @apply cursor-pointer;
 
-  &:first-child {
-    @apply rounded-t-lg;
-  }
-
-  &:last-child {
-    @apply rounded-b-lg;
-  }
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
 
-  &:hover {
-    @apply bg-gray-100;
-  }
+const emit = defineEmits(["click"]);
 
-  &:active {
-    @apply bg-gray-200 font-medium;
-  }
+function onClick() {
+  // invokes click event on current item
+  emit("click");
 
-  &:disabled {
-    @apply bg-gray-500;
-  }
+  if (hideDropdownOptions) hideDropdownOptions();
 }
-</style>
+
+const { wrapperAttrs } = useAttrs(props);
+</script>

package/ui.dropdown-link/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.dropdown-link/composables/attrs.composable.js

@@ -0,0 +1,65 @@
+import useUI from "vueless/composable.ui";
+import { cva, cx } from "vueless/service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props, { isShownOptions }) {
+  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { listWrapper } = config.value;
+
+  const cvaListWrapper = cva({
+    base: listWrapper.base,
+    variants: listWrapper.variants,
+    compoundVariants: listWrapper.compoundVariants,
+  });
+
+  const listWrapperClasses = computed(() =>
+    cvaListWrapper({
+      listYPosition: props.listYPosition,
+      listXPosition: props.listXPosition,
+    }),
+  );
+
+  // Get list wrapper position classes to apply them to list without wrapper
+  const cvaListWrapperVariants = cva({
+    base: "",
+    variants: listWrapper.variants,
+    compoundVariants: [],
+  });
+
+  const listWrapperPositionClasses = computed(() =>
+    cvaListWrapperVariants({
+      listYPosition: props.listYPosition,
+      listXPosition: props.listXPosition,
+    }),
+  );
+
+  const wrapperAttrs = getAttrs("wrapper", true);
+  const triggerAttrs = getAttrs("trigger");
+  const linkAttrs = getAttrs("link", { isComponent: true });
+  const iconAttrsRaw = getAttrs("icon", { isComponent: true });
+
+  const iconAttrs = computed(() => {
+    const rotateClasses = isShownOptions.value && config.value.iconRotate;
+
+    return {
+      ...iconAttrsRaw.value,
+      class: cx([iconAttrsRaw.value.class, rotateClasses]),
+    };
+  });
+
+  const listWrapperAttrs = getAttrs("listWrapper", { classes: listWrapperClasses });
+  const listAttrs = getAttrs("list", { isComponent: true, classes: listWrapperPositionClasses });
+
+  return {
+    config,
+    listWrapperAttrs,
+    wrapperAttrs,
+    linkAttrs,
+    listAttrs,
+    iconAttrs,
+    triggerAttrs,
+    hasSlotContent,
+  };
+}

package/ui.dropdown-link/configs/default.config.js

@@ -0,0 +1,37 @@
+export default /*tw*/ {
+  wrapper: "relative inline-block",
+  trigger: "flex items-center relative space-x-0.5",
+  link: "",
+  icon: "transition-all duration-300",
+  iconName: "keyboard_arrow_down",
+  iconRotate: "rotate-180",
+  listWrapper: {
+    base: `
+      absolute z-10
+      max-h-60 overflow-y-auto overflow-x-hidden md:!w-auto
+      rounded-lg border-gray-300 shadow bg-white
+    `,
+    variants: {
+      listYPosition: {
+        top: "bottom-6 mb-4",
+        bottom: "top-3 mt-4",
+      },
+      listXPosition: {
+        left: "left-0",
+        right: "right-0",
+      },
+    },
+  },
+  list: "w-fit",
+  defaultVariants: {
+    color: "brand",
+    size: "md",
+    listYPosition: "bottom",
+    listXPosition: "left",
+    underlined: undefined,
+    dashed: true,
+    noRing: true,
+    noIcon: false,
+    disabled: false,
+  },
+};

package/ui.dropdown-link/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 UDropdownLink = "UDropdownLink";

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

@@ -5,16 +5,16 @@ import UDropdownItem from "vueless/ui.dropdown-item";
 import URow from "vueless/ui.container-row";
 
 export default {
+  id: "2030",
   title: "Dropdowns / Dropdown Link",
   component: UDropdownLink,
   args: {
-    text: "Dropdown",
+    label: "Dropdown",
     options: [
       { label: "option 1", value: "1" },
       { label: "option 2", value: "2" },
       { label: "option 3", value: "3" },
     ],
-    noFocusRing: true,
   },
   argTypes: {
     ...getArgTypes(UDropdownLink.name),
@@ -60,7 +60,7 @@ const SlotTemplate = (args) => ({
   `,
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
+const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { UDropdownLink, URow },
   setup() {
     return {
@@ -72,15 +72,15 @@ const SizesTemplate = (args, { argTypes }) => ({
     <URow>
       <UDropdownLink
         v-for="(size, index) in sizes"
-        :size="size"
         v-bind="args"
+        :size="size"
         :key="index"
       />
     </URow>
   `,
 });
 
-const ColorsTemplate = (args, { argTypes }) => ({
+const ColorsTemplate = (args, { argTypes } = {}) => ({
   components: { UDropdownLink, URow },
   setup() {
     return {
@@ -93,9 +93,9 @@ const ColorsTemplate = (args, { argTypes }) => ({
       <URow>
         <UDropdownLink
           v-for="(color, id) in colors"
-          :color="color"
-          :text="color"
           v-bind="args"
+          :color="color"
+          :label="color"
           :key="id"
         />
       </URow>
@@ -113,15 +113,15 @@ export const colors = ColorsTemplate.bind({});
 colors.args = {};
 
 export const WithoutDropdownIcon = DefaultTemplate.bind({});
-WithoutDropdownIcon.args = { dropdownIcon: false };
+WithoutDropdownIcon.args = { noIcon: true };
 
 export const dropdownListSlot = SlotTemplate.bind({});
 dropdownListSlot.args = {
   slotTemplate: `
     <template #default>
-      <UDropdownItem text="Some option" />
-      <UDropdownItem text="Some option 2" />
-      <UDropdownItem text="Some option 3" />
+      <UDropdownItem label="Some option" />
+      <UDropdownItem label="Some option 2" />
+      <UDropdownItem label="Some option 3" />
     </template>
   `,
 };