vueless 0.0.2 → 0.0.3

package/ui.data-table/services/table.service.js

@@ -0,0 +1,15 @@
+export default class TableService {
+  static normalizeColumns(columns) {
+    return columns.map((column) => (typeof column === "string" ? { label: column } : column));
+  }
+
+  static getFilteredRow(row, columns) {
+    const filteredRow = Object.entries(row).filter((item) => {
+      const isShownColumn = columns.some((column) => column.key === item[0]);
+
+      if (isShownColumn) return item;
+    });
+
+    return Object.fromEntries(filteredRow);
+  }
+}

package/ui.data-table-cell/composables/attrs.composable.js

@@ -0,0 +1,24 @@
+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 { tableCell } = config.value;
+
+  const cvaTableCell = cva({
+    base: tableCell.base,
+    variants: tableCell.variants,
+    compoundVariants: tableCell.compoundVariants,
+  });
+
+  const tableCellClasses = computed(() => cvaTableCell({ compact: props.compact }));
+
+  const tableCellAttrs = getAttrs("tableCell", { classes: tableCellClasses });
+
+  return {
+    tableCellAttrs,
+  };
+}

package/ui.data-table-cell/configs/default.config.js

@@ -0,0 +1,19 @@
+export default /*tw*/ {
+  tableCell: {
+    base: `
+      p-[1.125rem] py-5 first:p-5 [&:nth-child(2)]:pl-0 group-[]/body:truncate group-[]/body:align-top 
+      group-[]/body:last:p-5
+    `,
+    variants: {
+      compact: {
+        true: `
+          group-[]/body:px-4 group-[]/body:py-3 group-[]/body:last:px-4 group-[]/body:last:py-3 
+          group-[]/body:first:px-4 group-[]/body:first:py-3 group-[]/footer:p-4:
+        `,
+      },
+    },
+  },
+  defaultVariants: {
+    compact: false,
+  },
+};

package/ui.data-table-cell/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 UTableCell = "UTableCell";

package/ui.data-table-cell/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <td :data-cy="dataCy" v-bind="tableCellAttrs">
+    <slot />
+  </td>
+</template>
+
+<script setup>
+import UIService from "vueless/service.ui";
+
+import { UTableCell } 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: "UTableCell", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Makes the cell more narrow.
+   */
+  compact: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UTableCell).default.compact,
+  },
+
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const { tableCellAttrs } = useAttrs(props);
+</script>

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

@@ -0,0 +1,63 @@
+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,
+  });
+
+  // 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 listWrapperClasses = computed(() =>
+    cvaListWrapper({
+      listYPosition: props.listYPosition,
+      listXPosition: props.listXPosition,
+    }),
+  );
+
+  const wrapperAttrs = getAttrs("wrapper");
+  const badgeAttrs = getAttrs("badge", { 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 {
+    listWrapperAttrs,
+    wrapperAttrs,
+    badgeAttrs,
+    listAttrs,
+    iconAttrs,
+    config,
+    hasSlotContent,
+  };
+}

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

@@ -0,0 +1,34 @@
+export default /*tw*/ {
+  wrapper: "relative inline-block",
+  badge: "cursor-pointer",
+  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-6",
+        bottom: "top-3 mt-6",
+      },
+      listXPosition: {
+        left: "left-0",
+        right: "right-0",
+      },
+    },
+  },
+  list: "w-fit",
+  defaultVariants: {
+    color: "brand",
+    size: "md",
+    weight: "medium",
+    variant: "primary",
+    listYPosition: "bottom",
+    listXPosition: "left",
+    noIcon: false,
+  },
+};

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

package/{ui.dropdown-tag → ui.dropdown-badge}/index.stories.js

@@ -1,14 +1,15 @@
 import { getArgTypes, getSlotNames } from "vueless/service.storybook";
 
-import UDropdownTag from "vueless/ui.dropdown-tag";
+import UDropdownBadge from "vueless/ui.dropdown-badge";
 import UDropdownItem from "vueless/ui.dropdown-item";
 import URow from "vueless/ui.container-row";
 
 export default {
-  title: "Dropdowns / Dropdown Tag",
-  component: UDropdownTag,
+  id: "2020",
+  title: "Dropdowns / Dropdown Badge",
+  component: UDropdownBadge,
   args: {
-    text: "Dropdown",
+    label: "Dropdown",
     options: [
       { label: "option 1", value: "1" },
       { label: "option 2", value: "2" },
@@ -16,7 +17,7 @@ export default {
     ],
   },
   argTypes: {
-    ...getArgTypes(UDropdownTag.name),
+    ...getArgTypes(UDropdownBadge.name),
   },
   parameters: {
     docs: {
@@ -28,39 +29,39 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UDropdownTag },
+  components: { UDropdownBadge },
   setup() {
-    const slots = getSlotNames(UDropdownTag.name);
+    const slots = getSlotNames(UDropdownBadge.name);
 
     return { args, slots };
   },
   template: `
-    <UDropdownTag
+    <UDropdownBadge
       v-bind="args"
     >
       <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
         <template v-if="args[slot]">{{ args[slot] }}</template>
       </template>
-    </UDropdownTag>
+    </UDropdownBadge>
   `,
 });
 
 const SlotTemplate = (args) => ({
-  components: { UDropdownTag, UDropdownItem },
+  components: { UDropdownBadge, UDropdownItem },
   setup() {
     return { args };
   },
   template: `
-    <UDropdownTag
+    <UDropdownBadge
       v-bind="args"
     >
       ${args.slotTemplate}
-    </UDropdownTag>
+    </UDropdownBadge>
   `,
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
-  components: { UDropdownTag, URow },
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UDropdownBadge, URow },
   setup() {
     return {
       args,
@@ -69,19 +70,19 @@ const SizesTemplate = (args, { argTypes }) => ({
   },
   template: `
     <URow>
-      <UDropdownTag
+      <UDropdownBadge
         v-for="(size, index) in sizes"
-        :size="size"
-        :text="size"
         v-bind="args"
+        :size="size"
+        :label="size"
         :key="index"
       />
     </URow>
   `,
 });
 
-const ColorsTemplate = (args, { argTypes }) => ({
-  components: { UDropdownTag, URow },
+const ColorsTemplate = (args, { argTypes } = {}) => ({
+  components: { UDropdownBadge, URow },
   setup() {
     return {
       args,
@@ -90,10 +91,10 @@ const ColorsTemplate = (args, { argTypes }) => ({
   },
   template: `
     <URow>
-      <UDropdownTag
+      <UDropdownBadge
         v-for="(color, index) in colors"
         :color="color"
-        :text="color"
+        :label="color"
         v-bind="args"
         :key="index"
       />
@@ -111,15 +112,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>
   `,
 };

package/ui.dropdown-badge/index.vue

@@ -0,0 +1,233 @@
+<template>
+  <div v-bind="wrapperAttrs">
+    <UBadge
+      :id="id"
+      :label="label"
+      :size="size"
+      :color="color"
+      :weight="weight"
+      :variant="variant"
+      :data-cy="`${dataCy}-badge`"
+      v-bind="badgeAttrs"
+      @click.stop="onClickBadge"
+    >
+      <template #right>
+        <UIcon
+          v-if="!noIcon"
+          :name="config.iconName"
+          :size="iconSize"
+          :color="color"
+          :data-cy="`${dataCy}-caret`"
+          v-bind="iconAttrs"
+        />
+      </template>
+    </UBadge>
+
+    <div v-if="isShownOptions && hasSlotContent($slots['default'])" v-bind="listWrapperAttrs">
+      <!-- @slot Use it to add dropdown list. -->
+      <slot />
+    </div>
+
+    <UDropdownList
+      v-if="isShownOptions && !hasSlotContent($slots['default'])"
+      v-model="selectValue"
+      :size="size"
+      :options="options"
+      :value-key="valueKey"
+      :label-key="labelKey"
+      :data-cy="`${dataCy}-item`"
+      v-bind="listAttrs"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, provide, ref, watch } from "vue";
+
+import UIcon from "vueless/ui.image-icon";
+import UBadge from "vueless/ui.text-badge";
+import UDropdownList from "vueless/ui.dropdown-list";
+import UIService, { getRandomId } from "vueless/service.ui";
+
+import defaultConfig from "./configs/default.config";
+import { UDropdownBadge } from "./constants";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UDropdownBadge", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Selected value.
+   */
+  modelValue: {
+    type: [String, Number],
+    default: "",
+  },
+
+  /**
+   * Badge label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Badge variant.
+   * @values primary, secondary, thirdary
+   */
+  variant: {
+    type: String,
+    default: UIService.get(defaultConfig, UDropdownBadge).default.variant,
+  },
+
+  /**
+   * Badge color.
+   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
+   */
+  color: {
+    type: String,
+    default: UIService.get(defaultConfig, UDropdownBadge).default.color,
+  },
+
+  /**
+   * Badge size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UDropdownBadge).default.size,
+  },
+
+  /**
+   * Badge font weight.
+   * @values regular, medium, bold
+   */
+  weight: {
+    type: String,
+    default: UIService.get(defaultConfig, UDropdownBadge).default.weight,
+  },
+
+  /**
+   * Hide dropdown icon.
+   */
+  noIcon: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDropdownBadge).default.noIcon,
+  },
+
+  /**
+   * Options list.
+   */
+  options: {
+    type: Array,
+    default: () => [],
+  },
+
+  /**
+   * Label key in the item object of options.
+   */
+  labelKey: {
+    type: String,
+    default: "label",
+  },
+
+  /**
+   * Value key in the item object of options.
+   */
+  valueKey: {
+    type: String,
+    default: "id",
+  },
+
+  /**
+   * The position of dropdown list on the y-axis.
+   * @values top, bottom
+   */
+  listYPosition: {
+    type: String,
+    default: UIService.get(defaultConfig, UDropdownBadge).default.listYPosition,
+  },
+
+  /**
+   * The position of dropdown list on the x-axis.
+   * @values left, right
+   */
+  listXPosition: {
+    type: String,
+    default: UIService.get(defaultConfig, UDropdownBadge).default.listXPosition,
+  },
+
+  /**
+   * Generates unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+provide("hideDropdownOptions", () => hideOptions);
+
+const emit = defineEmits(["update:modelValue"]);
+
+const isShownOptions = ref(false);
+
+const { config, listWrapperAttrs, wrapperAttrs, badgeAttrs, listAttrs, iconAttrs, hasSlotContent } =
+  useAttrs(props, { isShownOptions });
+
+const selectValue = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    isShownOptions.value = false;
+    emit("update:modelValue", value);
+  },
+});
+
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+  };
+
+  return sizes[props.size];
+});
+
+watch(() => props.modelValue, hideOptions);
+
+onMounted(() => window.addEventListener("click", onClickOutside));
+onUnmounted(() => window.removeEventListener("click", onClickOutside));
+
+function onClickBadge() {
+  isShownOptions.value = !isShownOptions.value;
+}
+
+function hideOptions() {
+  isShownOptions.value = false;
+}
+
+function onClickOutside(event) {
+  if (!document.getElementById(props.id)?.contains(event.target)) {
+    hideOptions();
+  }
+}
+</script>

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

@@ -0,0 +1,63 @@
+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");
+  const buttonAttrs = getAttrs("button", { 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,
+    buttonAttrs,
+    listAttrs,
+    iconAttrs,
+    wrapperAttrs,
+    hasSlotContent,
+  };
+}