vueless 0.0.3 → 0.0.5

package/src/ui.form-radio-card/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/{ui.form-radio-card → src/ui.form-radio-card}/composables/attrs.composable.js

@@ -1,5 +1,5 @@
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva, cx } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
@@ -16,11 +16,16 @@ export function useAttrs(props) {
 
   const radioClasses = computed(() => setColor(cvaRadio({ color: props.color }), props.color));
 
-  const wrapperAttrs = getAttrs("wrapper");
+  const wrapperAttrsRaw = getAttrs("wrapper");
   const radioAttrs = getAttrs("radio", { isComponent: true, classes: radioClasses });
   const labelAttrs = getAttrs("label", { isComponent: true });
   const iconAttrs = getAttrs("icon", { isComponent: true });
 
+  const wrapperAttrs = computed(() => (classes) => ({
+    ...wrapperAttrsRaw.value,
+    class: cx([wrapperAttrsRaw.value.class, classes]),
+  }));
+
   return {
     radioAttrs,
     iconAttrs,

package/{ui.form-radio-card → src/ui.form-radio-card}/configs/default.config.js

@@ -4,8 +4,8 @@ export default /*tw*/ {
   description: "text-xs font-normal text-gray-500/[85]",
   radio: {
     base: "absolute right-4 top-2 !gap-0",
+    label: "mr-1",
   },
-  label: "mr-1",
   icon: "mb-3 flex justify-center",
   defaultVariants: {
     color: "brand",

package/{ui.form-radio-card → src/ui.form-radio-card}/index.stories.js

@@ -1,7 +1,7 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
-import URadioCard from "vueless/ui.form-radio-card";
-import UIcon from "vueless/ui.image-icon";
+import URadioCard from "../ui.form-radio-card";
+import UIcon from "../ui.image-icon";
 
 export default {
   id: "3150",

package/{ui.form-radio-card → src/ui.form-radio-card}/index.vue

@@ -1,30 +1,20 @@
 <template>
-  <div :class="[gridColsClass]" v-bind="wrapperAttrs">
-    <ULabel
-      v-for="(item, index) in options"
-      :key="item.value"
-      :data-cy="`${dataCy}-item-${index}`"
-      :for="id + index"
-      :description="item.description"
-      :config="labelConfig"
-    >
+  <div v-bind="wrapperAttrs(gridColsClass)">
+    <template v-for="(item, index) in options" :key="id + index">
       <URadio
         :id="id + index"
         v-model="selectedItem"
         :value="item.value"
         :name="name"
         v-bind="radioAttrs"
+        :label="item.label"
+        :description="item.description"
       />
-
-      <div>
-        <!-- @slot Use it to add icon. -->
-        <slot v-if="withIcon" name="icon" :item="item">
-          <UIcon :name="item.iconName" size="xl" :color="color" v-bind="iconAttrs" />
-        </slot>
-      </div>
-
-      <div v-bind="labelAttrs">{{ item.label }}</div>
-    </ULabel>
+      <!-- @slot Use it to add icon. -->
+      <slot v-if="withIcon" name="icon" :item="item">
+        <UIcon :name="item.iconName" size="xl" :color="color" v-bind="iconAttrs" />
+      </slot>
+    </template>
   </div>
 </template>
 
@@ -32,8 +22,8 @@
 import { computed } from "vue";
 import { useStore } from "vuex";
 
-import UIcon from "vueless/ui.image-icon";
-import UIService, { getRandomId } from "vueless/service.ui";
+import UIcon from "../ui.image-icon";
+import UIService, { getRandomId } from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
 import { URadioCard } from "./constants";

package/{ui.form-radio-card → src/ui.form-radio-card}/services/variant.service.js

@@ -1,4 +1,4 @@
-import { cva } from "vueless/service.ui";
+import { cva } from "../service.ui";
 
 export default class VariantService {
   static get(config) {

package/src/ui.form-radio-group/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/{ui.form-radio-group → src/ui.form-radio-group}/composables/attrs.composable.js

@@ -1,7 +1,7 @@
 import { computed } from "vue";
 
-import { cva } from "vueless/service.ui";
-import useUI from "vueless/composable.ui";
+import { cva } from "../../service.ui";
+import useUI from "../../composable.ui";
 
 import defaultConfig from "../configs/default.config";
 

package/{ui.form-radio-group → src/ui.form-radio-group}/index.stories.js

@@ -1,7 +1,7 @@
-import { getArgTypes } from "vueless/service.storybook";
+import { getArgTypes } from "../service.storybook";
 
-import URadioGroup from "vueless/ui.form-radio-group";
-import URadio from "vueless/ui.form-radio";
+import URadioGroup from "../ui.form-radio-group";
+import URadio from "../ui.form-radio";
 
 export default {
   id: "3160",

package/{ui.form-radio-group → src/ui.form-radio-group}/index.vue

@@ -18,7 +18,7 @@
 <script setup>
 import { computed, provide } from "vue";
 
-import UIService from "vueless/service.ui";
+import UIService from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
 import { URadioGroup } from "./constants";

package/src/ui.form-select/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/{ui.form-select → src/ui.form-select}/composables/attrs.composable.js

@@ -1,5 +1,5 @@
-import useUI from "vueless/composable.ui";
-import { cva, cx } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva, cx } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";

package/{ui.form-select → src/ui.form-select}/configs/default.config.js

@@ -113,6 +113,13 @@ export default /*tw*/ {
     ],
   },
   dropdownList: "group-[]/top:bottom-full group-[]/top:top-auto top-full",
+  i18n: {
+    listIsEmpty: "List is empty.",
+    noDataToShow: "No data to show.",
+    clear: "clear",
+    addMore: "Add more...",
+    add: "Add",
+  },
   defaultVariants: {
     size: "md",
     openDirection: "auto",

package/{ui.form-select → src/ui.form-select}/index.stories.js

@@ -1,8 +1,8 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
-import USelect from "vueless/ui.form-select";
-import URow from "vueless/ui.container-row";
-import UBadge from "vueless/ui.text-badge";
+import USelect from "../ui.form-select";
+import URow from "../ui.container-row";
+import UBadge from "../ui.text-badge";
 
 export default {
   id: "3080",

package/{ui.form-select → src/ui.form-select}/index.vue

@@ -151,7 +151,7 @@
           v-bind="caretClearTextAttrs"
           @mousedown.prevent.capture="removeElement(localValue)"
           @click.prevent.capture
-          v-text="i18n.clear"
+          v-text="config.i18n.clear"
         />
       </div>
 
@@ -189,11 +189,11 @@
         </template>
 
         <template #empty="{ emptyStyles }">
-          <span v-show="isEmpty" :class="emptyStyles" v-text="i18n.listIsEmpty" />
+          <span v-show="isEmpty" :class="emptyStyles" v-text="config.i18n.listIsEmpty" />
           <span
             v-show="options.length === 0 && !search && !isEmpty"
             :class="emptyStyles"
-            v-text="i18n.noDataToShow"
+            v-text="config.i18n.noDataToShow"
           />
         </template>
       </UDropdownList>
@@ -203,10 +203,9 @@
 
 <script setup>
 import { ref, computed, nextTick, watch, useSlots, onMounted } from "vue";
-import debounce from "lodash.debounce";
+import { debounce } from "lodash-es";
 
-import UIService, { getRandomId, isMac } from "vueless/service.ui";
-import I18nServiceDefault from "@vueless/services/i18n";
+import UIService, { getRandomId, isMac } from "../service.ui";
 
 import SelectService from "./services/select.service";
 import useAttrs from "./composables/attrs.composable";
@@ -436,8 +435,6 @@ const emit = defineEmits([
 
 const slots = useSlots();
 
-const { getTranslation } = new I18nServiceDefault();
-
 const isOpen = ref(false);
 const preferredOpenDirection = ref(DIRECTION.bottom);
 const search = ref("");
@@ -450,18 +447,42 @@ const labelComponentRef = ref(null);
 const leftSlotWrapperRef = ref(null);
 const innerWrapperRef = ref(null);
 
-const i18n = computed(() => {
-  return {
-    clear: getTranslation("clear"),
-    listIsEmpty: getTranslation("listIsEmpty"),
-    noDataToShow: getTranslation("noDataToShow"),
-    addMore: getTranslation("addMore"),
-    add: getTranslation("add"),
-  };
+const isTop = computed(() => {
+  if (props.openDirection === DIRECTION.top) return true;
+  if (props.openDirection === DIRECTION.bottom) return false;
+
+  return preferredOpenDirection.value === DIRECTION.top;
 });
 
+const selectedLabel = computed(() => {
+  return isLocalValue.value ? getOptionLabel(localValue.value) : "";
+});
+
+const {
+  config,
+  hasSlotContent,
+  labelAttrs,
+  wrapperAttrs,
+  innerWrapperAttrs,
+  leftSlotAttrs,
+  beforeCaretSlotAttrs,
+  afterCaretSlotAttrs,
+  caretToggleAttrs,
+  iconToggleAttrs,
+  caretClearAttrs,
+  caretClearTextAttrs,
+  iconClearAttrs,
+  caretRemoveItemAttrs,
+  iconRemoveItemAttrs,
+  searchAttrs,
+  searchInputAttrs,
+  selectedLabelsAttrs,
+  selectedLabelAttrs,
+  dropdownListAttrs,
+} = useAttrs(props, { isTop, isOpen, selectedLabel });
+
 const inputPlaceholder = computed(() => {
-  return props.multiple && localValue.value.length ? i18n.value.addMore : props.placeholder;
+  return props.multiple && localValue.value.length ? config.value.i18n.addMore : props.placeholder;
 });
 
 const dropdownValue = computed({
@@ -482,21 +503,10 @@ const isSelectedValueLabelVisible = computed(() => {
   return !props.multiple && isLocalValue.value && (!isOpen.value || !props.searchable);
 });
 
-const selectedLabel = computed(() => {
-  return isLocalValue.value ? getOptionLabel(localValue.value) : "";
-});
-
 const labelAlign = computed(() => {
   return props.labelOutside ? "top" : "topInside";
 });
 
-const isTop = computed(() => {
-  if (props.openDirection === DIRECTION.top) return true;
-  if (props.openDirection === DIRECTION.bottom) return false;
-
-  return preferredOpenDirection.value === DIRECTION.top;
-});
-
 const filteredOptions = computed(() => {
   const normalizedSearch = search.value.toLowerCase().trim();
 
@@ -706,48 +716,4 @@ function setLabelPosition() {
     labelComponentRef.value.labelElement.style.left = `${leftSlotWidth + innerWrapperPaddingLeft}px`;
   }
 }
-
-const {
-  config,
-  hasSlotContent,
-  labelAttrs,
-  wrapperAttrs,
-  innerWrapperAttrs,
-  leftSlotAttrs,
-  beforeCaretSlotAttrs,
-  afterCaretSlotAttrs,
-  caretToggleAttrs,
-  iconToggleAttrs,
-  caretClearAttrs,
-  caretClearTextAttrs,
-  iconClearAttrs,
-  caretRemoveItemAttrs,
-  iconRemoveItemAttrs,
-  searchAttrs,
-  searchInputAttrs,
-  selectedLabelsAttrs,
-  selectedLabelAttrs,
-  dropdownListAttrs,
-} = useAttrs(props, { isTop, isOpen, selectedLabel });
 </script>
-
-<i18n>
-en:
-  listIsEmpty: "List is empty."
-  noDataToShow: "No data to show."
-  clear: "clear"
-  addMore: "Add more..."
-  add: Add
-ru:
-  listIsEmpty: "Список пуст."
-  noDataToShow: "Нет данных."
-  clear: "очистить"
-  addMore: "Добавить ещё..."
-  add: Добавить
-ua:
-  listIsEmpty: "Список порожній."
-  noDataToShow: "Дані відсутні."
-  clear: "очистити"
-  addMore: "Додати ще..."
-  add: Додати
-</i18n>

package/{ui.form-switch → src/ui.form-switch}/composables/attrs.composable.js

@@ -1,5 +1,5 @@
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";

package/{ui.form-switch → src/ui.form-switch}/configs/default.config.js

@@ -55,6 +55,10 @@ export default /*tw*/ {
       { toggleLabel: false, color: "grayscale", class: "bg-gray-700 hover:bg-gray-800 active:bg-gray-900" },
     ],
   },
+  i18n: {
+    inactive: "Off",
+    active: "On",
+  },
   defaultVariants: {
     color: "brand",
     size: "md",

package/{ui.form-switch → src/ui.form-switch}/index.stories.js

@@ -1,8 +1,8 @@
-import { getArgTypes } from "vueless/service.storybook";
+import { getArgTypes } from "../service.storybook";
 
-import USwitch from "vueless/ui.form-switch";
-import UIcon from "vueless/ui.image-icon";
-import URow from "vueless/ui.container-row";
+import USwitch from "../ui.form-switch";
+import UIcon from "../ui.image-icon";
+import URow from "../ui.container-row";
 
 export default {
   id: "3130",

package/{ui.form-switch → src/ui.form-switch}/index.vue

@@ -39,9 +39,8 @@
 <script setup>
 import { computed } from "vue";
 
-import UIcon from "vueless/ui.image-icon";
-import UIService, { getRandomId } from "vueless/service.ui";
-import I18nServiceDefault from "@vueless/services/i18n";
+import UIcon from "../ui.image-icon";
+import UIService, { getRandomId } from "../service.ui";
 
 import { USwitch } from "./constants";
 import defaultConfig from "./configs/default.config";
@@ -153,13 +152,6 @@ const props = defineProps({
 
 const emit = defineEmits(["update:modelValue"]);
 
-const { getTranslation } = new I18nServiceDefault();
-
-const i18n = computed(() => ({
-  active: getTranslation("active"),
-  inactive: getTranslation("inactive"),
-}));
-
 const checkedValue = computed({
   get: () => props.modelValue,
   set: (value) => emit("update:modelValue", value),
@@ -169,7 +161,7 @@ const { config, iconAttrs, labelAttrs, inputAttrs, wrapperAttrs, circleAttrs, to
   useAttrs(props, { checked: checkedValue });
 
 const switchLabel = computed(() => {
-  return checkedValue.value ? i18n.value.active : i18n.value.inactive;
+  return checkedValue.value ? config.value.i18n.active : config.value.i18n.inactive;
 });
 
 const iconSize = computed(() => {
@@ -204,15 +196,3 @@ function onKeydownSpace() {
   toggle();
 }
 </script>
-
-<i18n>
-en:
-  inactive: "Off"
-  active: "On"
-ru:
-  inactive: "Выкл"
-  active: "Вкл"
-ua:
-  inactive: "Викл"
-  active: "Вкл"
-</i18n>

package/{ui.form-switch → src/ui.form-switch}/services/variant.service.js

@@ -1,4 +1,4 @@
-import { cva } from "vueless/service.ui";
+import { cva } from "../../service.ui";
 
 export default class VariantService {
   static get(config) {

package/src/ui.form-textarea/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/{ui.form-textarea → src/ui.form-textarea}/composables/attrs.composable.js

@@ -1,5 +1,5 @@
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";

package/{ui.form-textarea → src/ui.form-textarea}/index.stories.js

@@ -1,9 +1,9 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
-import UTextarea from "vueless/ui.form-textarea";
-import UIcon from "vueless/ui.image-icon";
-import URow from "vueless/ui.container-row";
-import UGroup from "vueless/ui.container-group";
+import UTextarea from "../ui.form-textarea";
+import UIcon from "../ui.image-icon";
+import URow from "../ui.container-row";
+import UGroup from "../ui.container-group";
 
 export default {
   id: "3070",

package/{ui.form-textarea → src/ui.form-textarea}/index.vue

@@ -54,8 +54,8 @@
 <script setup>
 import { computed, onMounted, ref, useSlots } from "vue";
 
-import UIService from "vueless/service.ui";
-import { getRandomId } from "vueless/service.ui";
+import UIService from "../service.ui";
+import { getRandomId } from "../service.ui";
 
 import { UTextarea } from "./constants";
 import defaultConfig from "./configs/default.config";

package/{ui.image-avatar → src/ui.image-avatar}/composables/attrs.composable.js

@@ -1,5 +1,5 @@
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";

package/{ui.image-avatar → src/ui.image-avatar}/index.stories.js

@@ -1,7 +1,7 @@
-import { getArgTypes } from "vueless/service.storybook";
+import { getArgTypes } from "../service.storybook";
 
-import UAvatar from "vueless/ui.image-avatar";
-import URow from "vueless/ui.container-row";
+import UAvatar from "../ui.image-avatar";
+import URow from "../ui.container-row";
 
 export default {
   id: "6030",

package/{ui.image-avatar → src/ui.image-avatar}/index.vue

@@ -14,7 +14,7 @@ import { computed } from "vue";
 
 import defaultAvatar from "./default-avatar.png";
 
-import UIService from "vueless/service.ui";
+import UIService from "../service.ui";
 
 import { UAvatar } from "./constants/index";
 import defaultConfig from "./configs/default.config";

package/src/ui.image-icon/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/{ui.image-icon → src/ui.image-icon}/composables/attrs.composable.js

@@ -1,5 +1,5 @@
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";

package/{ui.image-icon → src/ui.image-icon}/index.stories.js

@@ -1,7 +1,7 @@
-import { getArgTypes } from "vueless/service.storybook";
+import { getArgTypes } from "../service.storybook";
 
-import UIcon from "vueless/ui.image-icon";
-import URow from "vueless/ui.container-row";
+import UIcon from "../ui.image-icon";
+import URow from "../ui.container-row";
 
 export default {
   id: "6010",

package/{ui.image-icon → src/ui.image-icon}/index.vue

@@ -19,7 +19,7 @@ import { directive as tippyDirective, setDefaultProps as tippySetConfig } from "
 import "tippy.js/dist/tippy.css";
 import "tippy.js/themes/light.css";
 import "tippy.js/animations/shift-away.css";
-import UIService from "vueless/service.ui";
+import UIService from "../service.ui";
 
 import { UIcon } from "./constants";
 import defaultConfig from "./configs/default.config";

package/{ui.image-logo → src/ui.image-logo}/composables/attrs.composable.js

@@ -1,7 +1,7 @@
 import { computed } from "vue";
 
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 

package/{ui.image-logo → src/ui.image-logo}/index.stories.js

@@ -1,7 +1,7 @@
-import { getArgTypes } from "vueless/service.storybook";
+import { getArgTypes } from "../service.storybook";
 
-import ULogo from "vueless/ui.image-logo";
-import URow from "vueless/ui.container-row";
+import ULogo from "../ui.image-logo";
+import URow from "../ui.container-row";
 
 export default {
   id: "6020",