@unsource/ui 2.7.10 → 2.7.12

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "unsource-ui",
   "configKey": "unsourceUi",
-  "version": "2.7.10",
+  "version": "2.7.12",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/UnButton.vue

@@ -52,8 +52,8 @@ const { variant = "" } = defineProps({
 });
 const variants = {
   "danger": "bg-danger/10 text-danger border-danger",
-  "primary": "bg-primary/10 text-primary border-primary",
-  "primary-fill": "bg-primary text-white border-transparent",
+  "primary": "bg-primary-500/10 bg-primary-500 border-primary",
+  "primary-fill": "bg-primary-500 text-white border-transparent",
   "secondary": "bg-gray-600/10 text-gray-600 border-transparent",
   "secondary-fill": "bg-gray-600 text-white border-transparent",
   "secondary-bordered": "bg-transparent border-gray-400 text-gray-400"

package/dist/runtime/components/UnCheckboxItem.vue

@@ -10,7 +10,7 @@
     >
       <div
         name="innerBox"
-        class="bg-primary rounded h-8px w-10px transition-height duration-200"
+        class="bg-primary-500 rounded h-8px w-10px transition-height duration-200"
         :class="[customClass.innerBox, customClass[selected ? 'selected' : 'notSelected']?.innerBox, selected ? '!h-10px' : '!h-1px']"
       />
     </div>

package/dist/runtime/components/UnMap.vue

@@ -19,7 +19,7 @@
       />
       <div
         class="absolute left-1/50 top-1/40 flex flex-col rounded-2xl gap-1 items-center select-none
-           text-primary-500 children:(bg-primary w-8 h-8 p-1 flex justify-center items-center rounded-2xl cursor-pointer) z-[999999]"
+           text-primary-500 children:(bg-primary-500 w-8 h-8 p-1 flex justify-center items-center rounded-2xl cursor-pointer) z-[999999]"
       >
         <UnNuxtIcon
           name="solar:add-square-line-duotone"

package/dist/runtime/components/UnRadioItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="px-4 py-3 flex flex-row items-center gap-3 transition duration-300 hover:bg-primary/10 border-0 min-w-fit"
+    class="px-4 py-3 flex flex-row items-center gap-3 transition duration-300 hover:bg-primary-500/10 border-0 min-w-fit"
     @click="toggle"
   >
     <div
@@ -10,7 +10,7 @@
     >
       <div
         name="radioInside"
-        class="bg-primary rounded-1/2 h-10px w-10px transition-opacity duration-200"
+        class="bg-primary-500 rounded-1/2 h-10px w-10px transition-opacity duration-200"
         :class="[customClass.radioInside, customClass[selected ? 'selected' : 'notSelected']?.radioInside, selected ? 'opacity-full' : 'opacity-0']"
       />
     </div>

package/dist/runtime/components/UnTab.vue

@@ -6,7 +6,7 @@
       :class="[
   customClass.label,
   item?.value === value ? customClass.selectedLabel : customClass.normalLabel,
-  item?.value === value ? 'font-semibold text-primary cursor-default border-b-primary' : 'border-b-border',
+  item?.value === value ? 'font-semibold bg-primary-500 cursor-default border-b-primary' : 'border-b-border',
   mini ? 'px-3' : ' px-4'
 ]"
       class="flex gap-2 justify-center items-center flex-grow basis-1 border-b-(2 solid) cursor-pointer p-3 text-sm"

package/dist/runtime/components/UnTableRow.vue

@@ -1,7 +1,7 @@
 <template>
   <tr
-    class="children:p-3 <md:children:p-1 text-center border-b-(2 solid border) hover:bg-primary/10"
-    :class="[trClass?.(item, items), { '!bg-primary/20': selected?.[idKey] === item[idKey] }]"
+    class="children:p-3 <md:children:p-1 text-center border-b-(2 solid border) hover:bg-primary-500/10"
+    :class="[trClass?.(item, items), { '!bg-primary-500/20': selected?.[idKey] === item[idKey] }]"
     @click="$emit('click:row', item);
   selected = item"
     @dbclick="$emit('dbclick:row', item)"

package/dist/runtime/components/UnToggle.d.vue.ts

@@ -1,11 +1,20 @@
+export type CardCustomClass = Partial<Record<'label' | 'button' | 'buttonWrapper' | 'buttonLabel', string>>;
 type __VLS_Props = {
-    label: string;
-    disabled: boolean;
+    label?: string;
+    disabled?: boolean;
+    customClass?: CardCustomClass;
+    trueLabel?: string;
+    falseLabel?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
 };
 type __VLS_ModelProps = {
     modelValue?: any;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/UnToggle.vue

@@ -1,26 +1,53 @@
 <template>
   <div
-    class="h-12 w-full flex flex-row gap-1 items-center cursor-pointer text-black-1 select-none"
-    @click="!disabled && changeValue()"
+    class="group h-12 w-full flex flex-row gap-1 items-center cursor-pointer text-black-1 select-none"
+    @click="changeValue"
   >
-    <div class="flex-grow truncate text-sm">
+    <div
+      v-if="label"
+      :class="customClass?.label"
+      class="flex-grow truncate text-sm"
+    >
       {{ label }}
     </div>
-    <UnToggleButton
-      :value="value"
-      :disabled="disabled"
-    />
+    <div
+      class="aspect-2/1 relative flex items-center rounded-full transition-bg duration-300 group/wrapper"
+      :class="[sizeClass[size], { 'opacity-50 disabled': disabled }, value ? 'true bg-primary-500' : 'false bg-border', customClass?.buttonWrapper]"
+    >
+      <div
+        class="group/button flex justify-center items-center absolute bg-white top-1/2 -translate-y-1/2 h-[calc(100%-4px)] aspect-square rounded-full shadow-toggle transform transition-all duration-200"
+        :class="[value ? 'end-[calc(100%-2px)] -translate-x-full' : 'end-0.5', customClass?.button]"
+      >
+        <small
+          v-if="value ? trueLabel : falseLabel"
+          :class="customClass?.buttonLabel"
+          class="px-1 text-inherit"
+        >
+          {{ value ? trueLabel : falseLabel }}
+        </small>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-const emit = defineEmits(["input"]);
-defineProps({
-  label: { type: String, required: true },
-  disabled: { type: Boolean, required: true }
+const { size = "xl", disabled } = defineProps({
+  label: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  customClass: { type: Object, required: false },
+  trueLabel: { type: String, required: false },
+  falseLabel: { type: String, required: false },
+  size: { type: String, required: false }
 });
 const value = defineModel();
 const changeValue = () => {
+  if (disabled) return;
   value.value = !value.value;
 };
+const sizeClass = {
+  sm: "w-8 children:(text-xs)",
+  md: "w-10 children:(text-sm)",
+  lg: "w-14 children:(text-md)",
+  xl: "w-18 children:(text-lg)"
+};
 </script>

package/dist/runtime/components/UnToggle.vue.d.ts

@@ -1,11 +1,20 @@
+export type CardCustomClass = Partial<Record<'label' | 'button' | 'buttonWrapper' | 'buttonLabel', string>>;
 type __VLS_Props = {
-    label: string;
-    disabled: boolean;
+    label?: string;
+    disabled?: boolean;
+    customClass?: CardCustomClass;
+    trueLabel?: string;
+    falseLabel?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
 };
 type __VLS_ModelProps = {
     modelValue?: any;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/uno.config.js

@@ -16,6 +16,7 @@ export default defineConfig({
       "secondary": "#5e5e5e",
       "secondary-500": "#fdf037",
       "primary": "#1270da",
+      "primary-500": "#1270da",
       "text": {
         head: "#4D4444"
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsource/ui",
-  "version": "2.7.10",
+  "version": "2.7.12",
   "private": false,
   "description": "nuxt ui kit for unsource env",
   "repository": "https://github.com/alisa2142/unsource-ui",

package/dist/runtime/components/UnToggleButton.d.vue.ts

@@ -1,11 +0,0 @@
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{}, {
-    $props: Partial<typeof __VLS_props>;
-    value: number | boolean;
-    disabled: boolean;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_props: {
-    readonly value: number | boolean;
-    readonly disabled: boolean;
-};

package/dist/runtime/components/UnToggleButton.vue

@@ -1,22 +0,0 @@
-<template>
-  <div
-      class="w-9 h-5 relative flex items-center rounded-full transition-bg duration-200"
-      :class="[value && !disabled ? 'bg-primary-500' : 'bg-border']">
-    <div
-        class="absolute bg-white h-4 w-4 rounded-1/2 shadow-toggle transform transition-all duration-200"
-        :class="[ value ? 'left-full -translate-x-18px ' : 'left-0 translate-x-0.5',]"/>
-  </div>
-</template>
-
-<script setup>
-defineProps({
-  value: {
-    type: [Boolean, Number],
-    default: false
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  }
-});
-</script>

package/dist/runtime/components/UnToggleButton.vue.d.ts

@@ -1,11 +0,0 @@
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{}, {
-    $props: Partial<typeof __VLS_props>;
-    value: number | boolean;
-    disabled: boolean;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_props: {
-    readonly value: number | boolean;
-    readonly disabled: boolean;
-};