vueless 0.0.4 → 0.0.6

package/src/ui.container-page/index.vue

@@ -0,0 +1,275 @@
+<template>
+  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+    <div v-bind="pageAttrs">
+      <div v-if="isShownHeader" v-bind="headerAttrs">
+        <div v-bind="headerLeftAttrs">
+          <!-- @slot Use it to add something before left side of the header. -->
+          <slot name="header-left-before" />
+
+          <!-- @slot Use it to customise left side of the header. -->
+          <slot name="header-left">
+            <div v-bind="headerLeftFallbackAttrs">
+              <ULink
+                v-if="isShownArrowButton"
+                size="xs"
+                color="gray"
+                :route="backRoute"
+                v-bind="backLinkAttrs"
+              >
+                <UIcon
+                  :name="config.backLinkIconName"
+                  size="xs"
+                  color="gray"
+                  v-bind="backLinkIconAttrs"
+                />
+                {{ backRoute.title }}
+              </ULink>
+
+              <UHeader :label="title" :size="titleSize" v-bind="titleAttrs" />
+              <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
+            </div>
+          </slot>
+
+          <!-- @slot Use it to add something after left side of the header. -->
+          <slot name="header-left-after" />
+        </div>
+
+        <div v-bind="headerRightAttrs">
+          <!-- @slot Use it to customise right side of the header. -->
+          <slot name="header-right" />
+        </div>
+      </div>
+
+      <div>
+        <!-- @slot Use it to add main content. -->
+        <slot />
+      </div>
+
+      <div v-if="isShownFooterSlot" class="vueless-page-footer" v-bind="footerAttrs">
+        <div class="vueless-page-footer-left" v-bind="footerLeftAttrs">
+          <!-- @slot Use it to add something to the left side of the footer. -->
+          <slot name="footer-left" />
+        </div>
+
+        <div class="vueless-page-footer-right" v-bind="footerRightAttrs">
+          <!-- @slot Use it to add something to the right side of the footer. -->
+          <slot name="footer-right" />
+        </div>
+      </div>
+    </div>
+
+    <div v-if="fixedRounding && !isMobileDevice" v-bind="rightRoundingWrapperAttrs">
+      <div v-bind="rightRoundingAttrs" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, useSlots, onMounted } from "vue";
+import { useStore } from "vuex";
+
+import ULink from "../ui.button-link/index.vue";
+import UIcon from "../ui.image-icon/index.vue";
+import UHeader from "../ui.text-header/index.vue";
+
+import UIService from "../service.ui";
+
+import defaultConfig from "./configs/default.config";
+import { UPage } from "./constants";
+import { useAttrs } from "./composables/attrs.composable";
+
+const slots = useSlots();
+const store = useStore();
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UPage", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * The width of the page.
+   * @values xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, wide
+   */
+  width: {
+    type: String,
+    default: UIService.get(defaultConfig, UPage).default.width,
+  },
+
+  /**
+   * Set page title.
+   */
+  title: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Set page title size.
+   * @values xs, sm, md, lg, xl, 2xl
+   */
+  titleSize: {
+    type: String,
+    default: UIService.get(defaultConfig, UPage).default.titleSize,
+  },
+
+  /**
+   * Set page description.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Set Vue router route params for back arrow.
+   */
+  backRoute: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Set gray background color.
+   */
+  gray: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UPage).default.gray,
+  },
+
+  /**
+   * Reverse left and right footer blocks (in a mobile version only).
+   */
+  mobileFooterReverse: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UPage).default.mobileFooterReverse,
+  },
+
+  /**
+   * Stick right page rounding.
+   */
+  fixedRounding: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UPage).default.fixedRounding,
+  },
+
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const isMobileDevice = computed(() => {
+  return store.getters["breakpoint/isMobileDevice"];
+});
+
+const {
+  config,
+  wrapperAttrs,
+  pageAttrs,
+  rightRoundingAttrs,
+  titleAttrs,
+  backLinkAttrs,
+  backLinkIconAttrs,
+  headerAttrs,
+  headerLeftFallbackAttrs,
+  descriptionAttrs,
+  headerLeftAttrs,
+  headerRightAttrs,
+  footerAttrs,
+  footerLeftAttrs,
+  footerRightAttrs,
+  rightRoundingWrapperAttrs,
+  hasSlotContent,
+} = useAttrs(props, { isMobileDevice });
+
+const isShownHeader = computed(() => {
+  const isHeaderLeftSlot = hasSlotContent(slots["header-left"]);
+  const isHeaderRightSlot = hasSlotContent(slots["header-left"]);
+
+  return props.title || isHeaderLeftSlot || isHeaderRightSlot;
+});
+
+const isShownFooterSlot = computed(() => {
+  return hasSlotContent(slots["footer-left"]) || hasSlotContent(slots["footer-right"]);
+});
+
+const isShownArrowButton = computed(() => {
+  return Boolean(Object.keys(props.backRoute).length);
+});
+
+onMounted(() => {
+  const classes = props.gray
+    ? config.value.htmlBody.split(" ").filter((item) => Boolean(item))
+    : "";
+
+  document.querySelector("body").classList.add(...classes);
+});
+</script>
+
+<style lang="postcss" scoped>
+/**
+  * TODO: Move this styles to global vueless config using tailwind group class and remove footer classes
+  */
+.vueless-page {
+  &-footer {
+    &-left:deep(.vueless-dropdown-button) {
+      @apply !block;
+    }
+
+    &-right,
+    &-left {
+      :deep(.vueless-dropdown-button) {
+        .dropdown-block,
+        .vueless-dropdown-button-list {
+          @apply max-md:w-full;
+        }
+
+        .vueless-dropdown-item {
+          @apply max-md:text-center;
+        }
+
+        .dropdown-list {
+          @apply mb-[calc(theme("spacing.mobile-menu-height")+3rem)];
+        }
+      }
+
+      &:deep(.vueless-dropdown-tag, .vueless-dropdown-link, .vueless-dropdown-button) {
+        @apply w-full md:w-auto;
+
+        .dropdown-list {
+        }
+
+        .dropdown-wrapper-list {
+          @apply mb-2 md:mb-0;
+        }
+
+        .dropdown-block {
+          @apply relative md:absolute;
+        }
+
+        .dropdown-list-right {
+          @apply w-full text-center;
+        }
+
+        .dropdown-wrapper {
+          @apply block w-full;
+
+          .vueless-svg-icon {
+            @apply right-auto;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/src/ui.container-row/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../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/src/ui.container-row/composables/attrs.composable.js

@@ -0,0 +1,23 @@
+import useUI from "../../composable.ui";
+import defaultConfig from "../configs/default.config";
+import { cva } from "../../service.ui";
+import { computed } from "vue";
+
+export function useAttrs(props) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+  const { wrapper } = config.value;
+
+  const cvaWrapper = cva({
+    base: wrapper.base,
+    variants: wrapper.variants,
+    compoundVariants: wrapper.compoundVariants,
+  });
+
+  const wrapperClasses = computed(() => cvaWrapper({ noMobile: props.noMobile }));
+
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+
+  return {
+    wrapperAttrs,
+  };
+}

package/src/ui.container-row/configs/default.config.js

@@ -0,0 +1,14 @@
+export default /*tw*/ {
+  wrapper: {
+    base: "flex items-start w-full",
+    variants: {
+      noMobile: {
+        true: "flex-row space-x-4",
+        false: "flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4",
+      },
+    },
+  },
+  defaultVariants: {
+    noMobile: false,
+  },
+};

package/src/ui.container-row/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 URow = "URow";

package/src/ui.container-row/index.stories.js

@@ -0,0 +1,81 @@
+import { getArgTypes } from "../service.storybook";
+
+import URow from "../ui.container-row";
+import UInput from "../ui.form-input";
+
+export default {
+  id: "5020",
+  title: "Containers / Row",
+  component: URow,
+  argTypes: {
+    ...getArgTypes(URow.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { URow, UInput },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow v-bind="args">
+      ${args.slotTemplate}
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  slotTemplate: `
+    <UInput label="Name" />
+    <UInput label="Lastname" />
+  `,
+};
+
+export const noMobile = DefaultTemplate.bind({});
+noMobile.args = {
+  noMobile: true,
+  slotTemplate: `
+    <UInput label="Name" />
+    <UInput label="Lastname" />
+  `,
+};
+
+export const nestedRows = DefaultTemplate.bind({});
+nestedRows.args = {
+  slotTemplate: `
+    <UInput label="Name" />
+
+    <URow>
+      <UInput label="Lastname" />
+      <UInput label="Age"/>
+    </URow>
+  `,
+};
+
+export const textBlocks = DefaultTemplate.bind({});
+textBlocks.args = {
+  slotTemplate: `
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+      sed do eiusmod tempor incididunt ut labore et dolore magna
+      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+      ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      Duis aute irure dolor in reprehenderit in voluptate velit
+      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+      occaecat cupidatat non proident, sunt in culpa qui officia
+      deserunt mollit anim id est laborum.
+    </p>
+
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+      sed do eiusmod tempor incididunt ut labore et dolore magna
+      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+      ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      Duis aute irure dolor in reprehenderit in voluptate velit
+      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+      occaecat cupidatat non proident, sunt in culpa qui officia
+      deserunt mollit anim id est laborum.
+    </p>
+  `,
+};

package/src/ui.container-row/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+    <!-- @slot Use it to add something inside. -->
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import UIService from "../service.ui";
+
+import { URow } 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: "URow", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Disables mobile adaptivity.
+   */
+  noMobile: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, URow).default.noMobile,
+  },
+
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const { wrapperAttrs } = useAttrs(props);
+</script>

package/src/ui.data-list/composables/attrs.composable.js

@@ -0,0 +1,45 @@
+import useUI from "../../composable.ui";
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+import { cx } from "../../service.ui";
+
+export function useAttrs(props) {
+  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { titleCrossed } = config.value;
+
+  const wrapperAttrs = getAttrs("wrapper");
+  const dividerAttrs = getAttrs("divider", { isComponent: true });
+  const emptyAttrs = getAttrs("empty", { isComponent: true });
+  const draggableAttrs = getAttrs("draggable");
+  const itemWrapperAttrs = getAttrs("itemWrapper");
+  const itemAttrs = getAttrs("item");
+  const customActionsAttrs = getAttrs("customActions");
+  const iconDeleteAttrs = getAttrs("iconDelete", { isComponent: true });
+  const iconEditAttrs = getAttrs("iconEdit", { isComponent: true });
+  const iconDragAttrs = getAttrs("iconDrag", { isComponent: true });
+  const nestedAttrs = getAttrs("nested", { isComponent: true });
+
+  const titleRaw = getAttrs("title");
+
+  const titleAttrs = computed(() => (isActive) => ({
+    ...titleRaw,
+    class: cx([titleRaw.value.class, isActive !== undefined && !isActive ? titleCrossed : ""]),
+  }));
+
+  return {
+    config,
+    wrapperAttrs,
+    dividerAttrs,
+    emptyAttrs,
+    draggableAttrs,
+    nestedAttrs,
+    itemWrapperAttrs,
+    itemAttrs,
+    iconDragAttrs,
+    titleAttrs,
+    customActionsAttrs,
+    iconDeleteAttrs,
+    iconEditAttrs,
+    hasSlotContent,
+  };
+}

package/src/ui.data-list/configs/default.config.js

@@ -0,0 +1,32 @@
+export default /*tw*/ {
+  wrapper: "",
+  draggable: "",
+  draggableDrag: "bg-gray-100",
+  draggableGhost: "bg-opacity-50",
+  itemWrapper: "group/item-wrapper",
+  item: `
+    group/item
+    border-b border-gray-100
+    group-last/item-wrapper:border-b-0 group-[]/nested:group-last/item-wrapper:border-b
+    py-4 space-x-4 flex flex-auto items-center justify-between
+  `,
+  iconDrag: "icon-drag cursor-move opacity-100 fill-gray-400 md:fill-gray-500",
+  iconDragName: "drag_indicator",
+  title: "text-base font-normal text-gray-900 flex-auto pt-px",
+  titleCrossed: "line-through",
+  customActions: `
+    space-x-5 opacity-50 md:flex md:items-center md:opacity-0
+    group-hover/item:md:block group-hover/item:opacity-100
+  `,
+  iconDelete: "hidden md:block md:opacity-0 group-hover/item:md:opacity-100",
+  iconDeleteName: "delete",
+  iconEdit: "fill-gray-500 opacity-50",
+  iconEditName: "edit_note",
+  nested: "group/nested ml-6",
+  defaultVariants: {
+    animationDuration: 200,
+    nesting: false,
+    upperlined: false,
+    hideEmptyStateForNesting: false,
+  },
+};

package/src/ui.data-list/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 UDataListName = "UDataList";

package/src/ui.data-list/index.stories.js

@@ -0,0 +1,91 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+import UDataList from "../ui.data-list";
+import UIcon from "../ui.image-icon";
+
+export default {
+  id: "7020",
+  title: "Data / Data List",
+  component: UDataList,
+  args: {
+    list: [
+      {
+        name: "name 1",
+        id: 1,
+        children: [
+          { name: "name 1.1", id: 1.1 },
+          { name: "name 1.2", id: 1.2 },
+          { name: "name 1.3", id: 1.3 },
+        ],
+      },
+      {
+        name: "name 2",
+        id: 2,
+        children: [
+          { name: "name 2.1", id: 2.1 },
+          { name: "name 2.2", id: 2.2 },
+        ],
+      },
+      {
+        name: "name 3",
+        id: 3,
+      },
+    ],
+  },
+  argTypes: {
+    ...getArgTypes(UDataList.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UDataList },
+  setup() {
+    const slots = getSlotNames(UDataList.name);
+
+    return { args, slots };
+  },
+  template: `
+    <UDataList v-bind="args" @dragSort="onDragSort"/>
+  `,
+  methods: {
+    onDragSort(value) {
+      this.list = value;
+    },
+  },
+});
+
+const SlotTemplate = (args) => ({
+  components: { UDataList, UIcon },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UDataList v-bind="args" @dragSort="onDragSort">
+      ${args.slotTemplate}
+    </UDataList>
+  `,
+  methods: {
+    onDragSort(value) {
+      this.list = value;
+    },
+  },
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const nesting = DefaultTemplate.bind({});
+nesting.args = { nesting: true };
+
+export const slotIcons = SlotTemplate.bind({});
+slotIcons.args = {
+  slotTemplate: `
+    <template #icons>
+      <UIcon
+        name="star"
+        color="red"
+        size="md"
+       />
+    </template>
+  `,
+};