vueless 0.0.223 → 0.0.224

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.223",
+  "version": "0.0.224",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.button-toggle/index.stories.js

@@ -148,8 +148,15 @@ Default.args = {
   name: "Default",
 };
 
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = {
+  name: "Disabled",
+  disabled: true,
+};
+
 export const label = DefaultTemplate.bind({});
 label.args = {
+  name: "Label",
   label: "Label",
   description: "description",
 };

package/ui.button-toggle/index.vue

@@ -223,15 +223,15 @@ function updateSelectedValue(value, checked) {
   }
 }
 
-provide("toggleType", readonly(type));
-provide("togglePill", () => props.pill);
-provide("toggleName", () => props.name);
-provide("toggleSize", () => props.size);
-provide("toggleBlock", () => props.block);
-provide("toggleSquare", () => props.square);
-provide("toggleVariant", () => props.variant);
-provide("toggleDisabled", () => props.disabled);
-provide("toggleSeparated", () => props.separated);
+provide("getToggleName", () => props.name);
+provide("getToggleType", () => type.value);
+provide("getToggleSize", () => props.size);
+provide("getTogglePill", () => props.pill);
+provide("getToggleBlock", () => props.block);
+provide("getToggleSquare", () => props.square);
+provide("getToggleVariant", () => props.variant);
+provide("getToggleDisabled", () => props.disabled);
+provide("getToggleSeparated", () => props.separated);
 
 provide("toggleSelectedValue", {
   selectedValue: readonly(selectedValue),

package/ui.button-toggle-item/composables/attrs.composable.js

@@ -1,9 +1,9 @@
 import { computed, toValue } from "vue";
 import useUI from "../../composable.ui";
-import { cx, cva } from "../../service.ui";
+import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
-export default function useAttrs(props, { selectedValue, separated, variant }) {
+export default function useAttrs(props, { isSelected, separated, variant }) {
   const { config, getAttrs, isSystemKey, hasSlotContent } = useUI(
     defaultConfig,
     () => props.config,
@@ -24,6 +24,7 @@ export default function useAttrs(props, { selectedValue, separated, variant }) {
           ...props,
           variant: toValue(variant),
           separated: toValue(separated),
+          selected: isSelected.value,
         });
       }
 
@@ -31,29 +32,6 @@ export default function useAttrs(props, { selectedValue, separated, variant }) {
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
-
-    if (key === "button") {
-      const selectedClasses = computed(() =>
-        cva(config.value.selected)({
-          ...props,
-          variant: toValue(variant),
-          separated: toValue(separated),
-        }),
-      );
-
-      const buttonAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => {
-        const isSelected = Array.isArray(selectedValue?.value)
-          ? selectedValue?.value?.includes(props.value)
-          : selectedValue?.value === props.value;
-
-        return {
-          ...buttonAttrs.value,
-          class: cx([buttonAttrs.value.class, isSelected && selectedClasses.value]),
-        };
-      });
-    }
   }
 
   return {

package/ui.button-toggle-item/configs/default.config.js

@@ -21,18 +21,29 @@ export default /*tw*/ {
         `,
       },
     },
-  },
-  input: "p-0 m-0 size-0 invisible absolute",
-  selected: {
-    base: "relative disabled:z-10",
-    variants: {
-      variant: {
-        primary: "!text-white bg-brand-600 border-brand-600 disabled:border-brand-600",
-        secondary: "text-brand-600 border-brand-600 disabled:border-brand-600 bg-brand-600 bg-opacity-10",
-        thirdary: " bg-brand-600 bg-opacity-20 hover:bg-opacity-20 focus:bg-opacity-20",
+    compoundVariants: [
+      {
+        selected: true,
+        class: "relative disabled:z-10",
       },
-    },
+      {
+        selected: true,
+        variant: "primary",
+        class: "!text-white bg-brand-600 border-brand-600 disabled:border-brand-600",
+      },
+      {
+        selected: true,
+        variant: "secondary",
+        class: "text-brand-600 border-brand-600 disabled:border-brand-600 bg-brand-600 bg-opacity-10",
+      },
+      {
+        selected: true,
+        variant: "thirdary",
+        class: "bg-brand-600 bg-opacity-20 hover:bg-opacity-20 focus:bg-opacity-20",
+      },
+    ],
   },
+  input: "p-0 m-0 size-0 invisible absolute",
   defaultVariants: {
     variant: "primary",
     type: "radio",

package/ui.button-toggle-item/index.vue

@@ -5,11 +5,11 @@
     color="grayscale"
     variant="secondary"
     :label="label"
-    :size="toValue(size)"
-    :pill="toValue(pill)"
-    :block="toValue(block)"
-    :square="toValue(square)"
-    :disabled="toValue(disabled)"
+    :size="getToggleSize()"
+    :pill="getTogglePill()"
+    :block="getToggleBlock()"
+    :square="getToggleSquare()"
+    :disabled="getToggleDisabled()"
     v-bind="buttonAttrs"
     @click="onClickSetValue"
   >
@@ -22,12 +22,13 @@
       <input
         :id="id"
         v-model="selectedItem"
-        :name="name"
-        :type="type"
+        :name="getToggleName()"
+        :type="getToggleType()"
         :value="value"
-        :disabled="toValue(disabled)"
+        :disabled="getToggleDisabled()"
         v-bind="inputAttrs"
       />
+      {{ label }}
       <!-- @slot Use it to add something instead of the text. -->
       <slot name="default" />
     </template>
@@ -40,7 +41,7 @@
 </template>
 
 <script setup>
-import { inject, onMounted, ref, toValue } from "vue";
+import { computed, inject, onMounted, ref } from "vue";
 
 import UButton from "../ui.button";
 import UIService, { getRandomId } from "../service.ui";
@@ -121,37 +122,44 @@ const emit = defineEmits([
   "update:modelValue",
 ]);
 
-const name = inject("toggleName", () => "toggle");
-const type = inject("toggleType", UIService.get(defaultConfig, UToggleItem).default.type);
-const size = inject("toggleSize", UIService.get(defaultConfig, UToggleItem).default.size);
-const pill = inject("togglePill", UIService.get(defaultConfig, UToggleItem).default.pill);
-const block = inject("toggleBlock", UIService.get(defaultConfig, UToggleItem).default.block);
-const square = inject("toggleSquare", UIService.get(defaultConfig, UToggleItem).default.square);
-const variant = inject("toggleVariant", UIService.get(defaultConfig, UToggleItem).default.variant);
-const separated = inject("toggleSeparated", () => true);
-// eslint-disable-next-line vue/no-dupe-keys, prettier/prettier
-const disabled = inject("toggleDisabled", props.disabled || UIService.get(defaultConfig, UToggleItem).default.disabled);
+/* eslint-disable prettier/prettier, vue/max-len */
+const getToggleName = inject("getToggleName", () => "toggle");
+const getToggleType = inject("getToggleType", () => UIService.get(defaultConfig, UToggleItem).default.type);
+const getToggleSize = inject("getToggleSize", () => UIService.get(defaultConfig, UToggleItem).default.size);
+const getTogglePill = inject("getTogglePill", () => UIService.get(defaultConfig, UToggleItem).default.pill);
+const getToggleBlock = inject("getToggleBlock", () => UIService.get(defaultConfig, UToggleItem).default.block);
+const getToggleSquare = inject("getToggleSquare", () => UIService.get(defaultConfig, UToggleItem).default.square);
+const getToggleVariant = inject("getToggleVariant",() => UIService.get(defaultConfig, UToggleItem).default.variant);
+const getToggleSeparated = inject("getToggleSeparated", () => true);
+const getToggleDisabled = inject("getToggleDisabled", () => props.disabled || UIService.get(defaultConfig, UToggleItem).default.disabled);
+/* eslint-enaable prettier/prettier, vue/max-len */
 
 const { selectedValue, updateSelectedValue } = inject("toggleSelectedValue", {});
 
 const selectedItem = ref("");
 
-const { buttonAttrs, inputAttrs } = useAttrs(props, { selectedValue, separated, variant });
+const isSelected = computed(() => {
+  return Array.isArray(selectedValue?.value)
+    ? selectedValue?.value?.includes(props.value)
+    : selectedValue?.value === props.value;
+});
+
+const { buttonAttrs, inputAttrs } = useAttrs(props, {
+  isSelected,
+  separated: getToggleSeparated,
+  variant: getToggleVariant
+});
 
 onMounted(() => {
-  if (type.value === TYPE_RADIO) {
-    selectedItem.value = selectedValue ? selectedValue.value : selectedItem.value;
-  } else {
-    selectedItem.value = selectedValue
-      ? selectedValue.value.includes(props.value)
-      : selectedItem.value;
-  }
+  selectedItem.value = getToggleType() === TYPE_RADIO
+  ? selectedValue?.value || selectedItem.value
+  : selectedValue?.value?.includes(props.value) || selectedItem.value;
 });
 
 function onClickSetValue() {
-  if (type.value === TYPE_RADIO) {
-    selectedItem.value = props.value;
-  }
+  selectedItem.value = getToggleType() === TYPE_RADIO 
+  ? props.value 
+  : selectedValue?.value?.includes(props.value) || selectedItem.value;
 
   updateSelectedValue && updateSelectedValue(props.value, !selectedItem.value);
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.223",
+  "version": "0.0.224",
   "contributions": {
     "html": {
       "description-markup": "markdown",