@unsource/ui 2.7.10 → 2.7.11

package/dist/module.json

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

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' : '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.11",
   "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;
-};