vueless 0.0.2 → 0.0.3

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

@@ -0,0 +1,23 @@
+import useUI from "vueless/composable.ui";
+import defaultConfig from "../configs/default.config";
+import { cva } from "vueless/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/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/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/ui.container-row/index.stories.js

@@ -4,6 +4,7 @@ import URow from "vueless/ui.container-row";
 import UInput from "vueless/ui.form-input";
 
 export default {
+  id: "5020",
   title: "Containers / Row",
   component: URow,
   argTypes: {
@@ -31,6 +32,15 @@ Default.args = {
   `,
 };
 
+export const noMobile = DefaultTemplate.bind({});
+noMobile.args = {
+  noMobile: true,
+  slotTemplate: `
+    <UInput label="Name" />
+    <UInput label="Lastname" />
+  `,
+};
+
 export const nestedRows = DefaultTemplate.bind({});
 nestedRows.args = {
   slotTemplate: `

package/ui.container-row/index.vue

@@ -1,52 +1,45 @@
 <template>
-  <div class="mono-row" :class="rowClasses" :data-cy="dataCy">
+  <div :data-cy="dataCy" v-bind="wrapperAttrs">
     <!-- @slot Use it to add something inside. -->
     <slot />
   </div>
 </template>
 
-<script>
-export default {
-  name: "URow",
+<script setup>
+import UIService from "vueless/service.ui";
 
-  props: {
-    /**
-     * Disables mobile adaptivity.
-     */
-    noMobile: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
+import { URow } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
 
-  computed: {
-    rowClasses() {
-      const mobileAdaptivity = this.noMobile ? "mono-row-no-mobile" : "mono-row-mobile";
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "URow", inheritAttrs: false });
 
-      return [mobileAdaptivity];
-    },
+const props = defineProps({
+  /**
+   * Disables mobile adaptivity.
+   */
+  noMobile: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, URow).default.noMobile,
   },
-};
-</script>
 
-<style lang="postcss" scoped>
-.mono-row {
-  @apply flex w-full;
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 
-  &-mobile {
-    @apply flex-col space-y-4;
-    @apply md:flex-row md:space-x-4 md:space-y-0;
-  }
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
 
-  &-no-mobile {
-    @apply flex-row space-x-4;
-  }
-}
-</style>
+const { wrapperAttrs } = useAttrs(props);
+</script>

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

@@ -0,0 +1,45 @@
+import useUI from "vueless/composable.ui";
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+import { cx } from "vueless/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/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/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/ui.data-list/index.stories.js

@@ -4,6 +4,7 @@ import UDataList from "vueless/ui.data-list";
 import UIcon from "vueless/ui.image-icon";
 
 export default {
+  id: "7020",
   title: "Data / Data List",
   component: UDataList,
   args: {