sprintify-ui 0.1.13 → 0.1.14

package/dist/types/src/components/BaseMediaPreview.vue.d.ts

@@ -10,6 +10,10 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    previewImage: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "delete"[], "delete", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     media: {
         required: true;
@@ -19,9 +23,14 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    previewImage: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
 }>> & {
     onDelete?: ((...args: any[]) => any) | undefined;
 }, {
     showRemove: boolean;
+    previewImage: boolean;
 }>;
 export default _default;

package/dist/types/src/components/BaseSwitch.vue.d.ts

@@ -24,6 +24,26 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    hasIcon: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    checkedIcon: {
+        default: string;
+        type: StringConstructor;
+    };
+    unCheckedIcon: {
+        default: string;
+        type: StringConstructor;
+    };
+    checkedIconColor: {
+        default: string;
+        type: StringConstructor;
+    };
+    unCheckedIconColor: {
+        default: string;
+        type: StringConstructor;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: boolean;
@@ -49,6 +69,26 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    hasIcon: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    checkedIcon: {
+        default: string;
+        type: StringConstructor;
+    };
+    unCheckedIcon: {
+        default: string;
+        type: StringConstructor;
+    };
+    checkedIconColor: {
+        default: string;
+        type: StringConstructor;
+    };
+    unCheckedIconColor: {
+        default: string;
+        type: StringConstructor;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -58,6 +98,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue: string | number | boolean | null | undefined;
     hasError: boolean;
     size: "base" | "xs" | "sm" | "lg" | "xl";
+    hasIcon: boolean;
+    checkedIcon: string;
+    unCheckedIcon: string;
+    checkedIconColor: string;
+    unCheckedIconColor: string;
 }>, {
     default: (_: {}) => any;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseMediaPreview.vue

@@ -8,13 +8,13 @@
     :class="[url ? 'duration-100 hover:bg-slate-100' : 'bg-white']"
   >
     <img
-      v-if="type == 'image' && url"
+      v-if="type == 'image' && url && previewImage"
       :src="url"
       class="h-full w-full bg-black object-contain object-center"
       :alt="name"
     />
     <img
-      v-else-if="type == 'image' && 'data_url' in media"
+      v-else-if="type == 'image' && 'data_url' in media && previewImage"
       :src="media.data_url"
       class="h-full w-full bg-black object-contain object-center"
       :alt="name"
@@ -71,6 +71,10 @@ const props = defineProps({
     default: true,
     type: Boolean,
   },
+  previewImage: {
+    default: true,
+    type: Boolean,
+  },
 });
 
 const name = computed(() => {

package/src/components/BaseSwitch.stories.js

@@ -1,6 +1,7 @@
 import BaseSwitch from './BaseSwitch.vue';
 import BaseContainer from './BaseContainer.vue';
 import { createFieldStory } from '../../.storybook/utils';
+import { Icon } from '@iconify/vue';
 
 export default {
   title: 'Form/BaseSwitch',
@@ -106,3 +107,22 @@ export const Field = createFieldStory({
   componentName: 'BaseSwitch',
   label: 'Activate',
 });
+
+const Icons = (args) => ({
+  components: {
+    BaseSwitch,
+    BaseContainer,
+  },
+  setup() {
+    const value = ref(true);
+    return { args, value };
+  },
+  template: `
+    <BaseSwitch v-model="value" :hasIcon="true" v-bind="args">
+      <span class="text-slate-600">Label</span>
+    </BaseSwitch>
+  `,
+});
+
+export const WithIcons = Icons.bind({});
+WithIcons.args = {};

package/src/components/BaseSwitch.vue

@@ -20,9 +20,13 @@
             height: sizePx + 'px',
             width: sizePx + 'px',
             transform: `translateX(${translateX}px)`,
+            color: iconColor,
+            fontSize: sizePx - 7 + 'px',
           }"
-          class="pointer-events-none inline-block rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
-        />
+          class="flex items-center justify-center inline-block transition duration-200 ease-in-out bg-white rounded-full shadow pointer-events-none ring-0"
+        >
+          <BaseIcon v-if="hasIcon" :icon="icon" />
+        </span>
       </Switch>
       <SwitchLabel v-if="$slots.default" class="cursor-pointer">
         <slot />
@@ -66,6 +70,26 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  hasIcon: {
+    default: false,
+    type: Boolean,
+  },
+  checkedIcon: {
+    default: 'heroicons-solid:check',
+    type: String,
+  },
+  unCheckedIcon: {
+    default: 'heroicons-solid:x',
+    type: String,
+  },
+  checkedIconColor: {
+    default: '#9ca3af',
+    type: String,
+  },
+  unCheckedIconColor: {
+    default: '#9ca3af',
+    type: String,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -182,6 +206,30 @@ const translateX = computed(() => {
   return padding.value;
 });
 
+const iconColor = computed(() => {
+  if (props.hasIcon) {
+    if (props.modelValue) {
+      return props.checkedIconColor;
+    }
+    if (!props.modelValue) {
+      return props.unCheckedIconColor;
+    }
+  }
+  return '';
+});
+
+const icon = computed(() => {
+  if (props.hasIcon) {
+    if (props.modelValue) {
+      return props.checkedIcon;
+    }
+    if (!props.modelValue) {
+      return props.unCheckedIcon;
+    }
+  }
+  return null;
+});
+
 function update(payload: any) {
   emitUpdate(payload);
 }