sprintify-ui 0.1.17 → 0.1.18

package/src/components/BaseSwitch.vue

@@ -1,209 +1,209 @@
-<template>
-  <SwitchGroup>
-    <div class="inline-flex items-center space-x-3">
-      <Switch
-        :model-value="normalizedModelValue"
-        :class="[
-          modelValue ? bg : 'bg-slate-200',
-          'relative inline-flex shrink-0 cursor-pointer items-center rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 ',
-          focus,
-        ]"
-        :style="{
-          width: width + 'px',
-          height: height + 'px',
-        }"
-        @update:model-value="update"
-      >
-        <span
-          aria-hidden="true"
-          :style="{
-            height: sizePx + 'px',
-            width: sizePx + 'px',
-            transform: `translateX(${translateX}px)`,
-            fontSize: sizePx - 7 + 'px',
-          }"
-          class="flex items-center justify-center transition duration-200 ease-in-out bg-white rounded-full shadow pointer-events-none text-slate-500 ring-0"
-        >
-          <BaseIcon v-if="icon" :icon="icon" />
-        </span>
-      </Switch>
-      <SwitchLabel v-if="$slots.default" class="cursor-pointer">
-        <slot />
-      </SwitchLabel>
-    </div>
-  </SwitchGroup>
-</template>
-
-<script lang="ts" setup>
-import { useField } from '@/composables/field';
-import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue';
-import { isNumber, isString } from 'lodash';
-import { PropType } from 'vue';
-
-const props = defineProps({
-  modelValue: {
-    default: false,
-    type: [Boolean, String, Number, null, undefined] as PropType<
-      boolean | string | number | null | undefined
-    >,
-  },
-  name: {
-    default: undefined,
-    type: String,
-  },
-  color: {
-    default: 'primary',
-    type: String as PropType<
-      'primary' | 'info' | 'danger' | 'warning' | 'success' | 'dark' | 'light'
-    >,
-  },
-  size: {
-    default: 'base',
-    type: String as PropType<'xs' | 'sm' | 'base' | 'lg' | 'xl'>,
-  },
-  hasError: {
-    default: false,
-    type: Boolean,
-  },
-  required: {
-    default: false,
-    type: Boolean,
-  },
-  checkedIcon: {
-    default: '',
-    type: String,
-  },
-  unCheckedIcon: {
-    default: '',
-    type: String,
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const { emitUpdate } = useField({
-  name: computed(() => props.name),
-  required: computed(() => props.required),
-  hasError: computed(() => props.hasError),
-  emit: emit,
-});
-
-const normalizedModelValue = computed((): boolean => {
-  if (isString(props.modelValue)) {
-    return props.modelValue === 'true' || props.modelValue === '1';
-  }
-  if (isNumber(props.modelValue)) {
-    return props.modelValue === 1;
-  }
-  return props.modelValue ?? false;
-});
-
-const bg = computed(() => {
-  if (props.color == 'primary') {
-    return 'bg-primary-500';
-  }
-  if (props.color == 'info') {
-    return 'bg-blue-500';
-  }
-  if (props.color == 'danger') {
-    return 'bg-red-500';
-  }
-  if (props.color == 'warning') {
-    return 'bg-yellow-500';
-  }
-  if (props.color == 'success') {
-    return 'bg-green-500';
-  }
-  if (props.color == 'light') {
-    return 'bg-slate-500';
-  }
-  return 'bg-slate-900';
-});
-const focus = computed(() => {
-  if (props.color == 'primary') {
-    return 'focus:ring-primary-500';
-  }
-  if (props.color == 'info') {
-    return 'focus:ring-blue-500';
-  }
-  if (props.color == 'danger') {
-    return 'focus:ring-red-500';
-  }
-  if (props.color == 'warning') {
-    return 'focus:ring-yellow-500';
-  }
-  if (props.color == 'success') {
-    return 'focus:ring-green-500';
-  }
-  if (props.color == 'light') {
-    return 'focus:ring-slate-500';
-  }
-  return 'focus:ring-slate-900';
-});
-const sizePx = computed(() => {
-  if (props.size == 'xs') {
-    return 12;
-  }
-  if (props.size == 'sm') {
-    return 16;
-  }
-  if (props.size == 'base') {
-    return 20;
-  }
-  if (props.size == 'lg') {
-    return 24;
-  }
-  if (props.size == 'xl') {
-    return 32;
-  }
-  return 16;
-});
-const padding = computed(() => {
-  if (props.size == 'xs') {
-    return 2;
-  }
-  if (props.size == 'sm') {
-    return 2.5;
-  }
-  if (props.size == 'base') {
-    return 3;
-  }
-  if (props.size == 'lg') {
-    return 3;
-  }
-  if (props.size == 'xl') {
-    return 4;
-  }
-  return 2;
-});
-const height = computed(() => {
-  return sizePx.value + 2 * padding.value;
-});
-const distance = computed(() => {
-  return 2 * sizePx.value;
-});
-const width = computed(() => {
-  return distance.value + 2 * padding.value;
-});
-const translateX = computed(() => {
-  if (props.modelValue) {
-    return padding.value + distance.value - sizePx.value;
-  }
-
-  return padding.value;
-});
-
-const icon = computed(() => {
-  if (props.modelValue && props.checkedIcon) {
-    return props.checkedIcon;
-  }
-  if (!props.modelValue && props.unCheckedIcon) {
-    return props.unCheckedIcon;
-  }
-  return null;
-});
-
-function update(payload: any) {
-  emitUpdate(payload);
-}
-</script>
+<template>
+  <SwitchGroup>
+    <div class="inline-flex items-center space-x-3">
+      <Switch
+        :model-value="normalizedModelValue"
+        :class="[
+          modelValue ? bg : 'bg-slate-200',
+          'relative inline-flex shrink-0 cursor-pointer items-center rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 ',
+          focus,
+        ]"
+        :style="{
+          width: width + 'px',
+          height: height + 'px',
+        }"
+        @update:model-value="update"
+      >
+        <span
+          aria-hidden="true"
+          :style="{
+            height: sizePx + 'px',
+            width: sizePx + 'px',
+            transform: `translateX(${translateX}px)`,
+            fontSize: sizePx - 7 + 'px',
+          }"
+          class="flex items-center justify-center transition duration-200 ease-in-out bg-white rounded-full shadow pointer-events-none text-slate-500 ring-0"
+        >
+          <BaseIcon v-if="icon" :icon="icon" />
+        </span>
+      </Switch>
+      <SwitchLabel v-if="$slots.default" class="cursor-pointer">
+        <slot />
+      </SwitchLabel>
+    </div>
+  </SwitchGroup>
+</template>
+
+<script lang="ts" setup>
+import { useField } from '@/composables/field';
+import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue';
+import { isNumber, isString } from 'lodash';
+import { PropType } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    default: false,
+    type: [Boolean, String, Number, null, undefined] as PropType<
+      boolean | string | number | null | undefined
+    >,
+  },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  color: {
+    default: 'primary',
+    type: String as PropType<
+      'primary' | 'info' | 'danger' | 'warning' | 'success' | 'dark' | 'light'
+    >,
+  },
+  size: {
+    default: 'base',
+    type: String as PropType<'xs' | 'sm' | 'base' | 'lg' | 'xl'>,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  checkedIcon: {
+    default: '',
+    type: String,
+  },
+  unCheckedIcon: {
+    default: '',
+    type: String,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const { emitUpdate } = useField({
+  name: computed(() => props.name),
+  required: computed(() => props.required),
+  hasError: computed(() => props.hasError),
+  emit: emit,
+});
+
+const normalizedModelValue = computed((): boolean => {
+  if (isString(props.modelValue)) {
+    return props.modelValue === 'true' || props.modelValue === '1';
+  }
+  if (isNumber(props.modelValue)) {
+    return props.modelValue === 1;
+  }
+  return props.modelValue ?? false;
+});
+
+const bg = computed(() => {
+  if (props.color == 'primary') {
+    return 'bg-primary-500';
+  }
+  if (props.color == 'info') {
+    return 'bg-blue-500';
+  }
+  if (props.color == 'danger') {
+    return 'bg-red-500';
+  }
+  if (props.color == 'warning') {
+    return 'bg-yellow-500';
+  }
+  if (props.color == 'success') {
+    return 'bg-green-500';
+  }
+  if (props.color == 'light') {
+    return 'bg-slate-500';
+  }
+  return 'bg-slate-900';
+});
+const focus = computed(() => {
+  if (props.color == 'primary') {
+    return 'focus:ring-primary-500';
+  }
+  if (props.color == 'info') {
+    return 'focus:ring-blue-500';
+  }
+  if (props.color == 'danger') {
+    return 'focus:ring-red-500';
+  }
+  if (props.color == 'warning') {
+    return 'focus:ring-yellow-500';
+  }
+  if (props.color == 'success') {
+    return 'focus:ring-green-500';
+  }
+  if (props.color == 'light') {
+    return 'focus:ring-slate-500';
+  }
+  return 'focus:ring-slate-900';
+});
+const sizePx = computed(() => {
+  if (props.size == 'xs') {
+    return 12;
+  }
+  if (props.size == 'sm') {
+    return 16;
+  }
+  if (props.size == 'base') {
+    return 20;
+  }
+  if (props.size == 'lg') {
+    return 24;
+  }
+  if (props.size == 'xl') {
+    return 32;
+  }
+  return 16;
+});
+const padding = computed(() => {
+  if (props.size == 'xs') {
+    return 2;
+  }
+  if (props.size == 'sm') {
+    return 2.5;
+  }
+  if (props.size == 'base') {
+    return 3;
+  }
+  if (props.size == 'lg') {
+    return 3;
+  }
+  if (props.size == 'xl') {
+    return 4;
+  }
+  return 2;
+});
+const height = computed(() => {
+  return sizePx.value + 2 * padding.value;
+});
+const distance = computed(() => {
+  return 2 * sizePx.value;
+});
+const width = computed(() => {
+  return distance.value + 2 * padding.value;
+});
+const translateX = computed(() => {
+  if (props.modelValue) {
+    return padding.value + distance.value - sizePx.value;
+  }
+
+  return padding.value;
+});
+
+const icon = computed(() => {
+  if (props.modelValue && props.checkedIcon) {
+    return props.checkedIcon;
+  }
+  if (!props.modelValue && props.unCheckedIcon) {
+    return props.unCheckedIcon;
+  }
+  return null;
+});
+
+function update(payload: any) {
+  emitUpdate(payload);
+}
+</script>

package/src/components/BaseSystemAlert.stories.js

@@ -1,63 +1,63 @@
-import BaseSystemAlert from './BaseSystemAlert.vue';
-
-export default {
-  title: 'Layout/BaseSystemAlert',
-  component: BaseSystemAlert,
-  args: {
-    to: 'https://google.com',
-  },
-  argTypes: {
-    color: {
-      control: { type: 'select' },
-      options: ['success', 'info', 'warning', 'danger'],
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    BaseSystemAlert,
-  },
-  setup() {
-    function onClose() {
-      alert('close');
-    }
-
-    return { args, onClose };
-  },
-  template: `
-    <BaseSystemAlert v-bind="args" @close="onClose">
-     Tempor nisi ut ea sit pariatur aute irure magna id id ullamco cupidatat enim.
-    </BaseSystemAlert>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-export const Closable = Template.bind({});
-Closable.args = {
-  closable: true,
-};
-
-const colors = ['info', 'success', 'warning', 'danger'];
-
-const Colors = (args) => ({
-  components: {
-    BaseSystemAlert,
-  },
-  setup() {
-    return { args, colors };
-  },
-  template: `
-  <div v-for="color in colors" class="mb-1">
-    <p class="text-xs text-slate-600 leading-tight mb-1">{{ color }}</p>
-    <BaseSystemAlert v-bind="args" :color="color">
-     Tempor nisi ut ea sit pariatur aute irure magna id id ullamco cupidatat enim.
-    </BaseSystemAlert>
-  </div>
-  `,
-});
-
-export const AllColors = Colors.bind({});
-AllColors.args = {};
+import BaseSystemAlert from './BaseSystemAlert.vue';
+
+export default {
+  title: 'Layout/BaseSystemAlert',
+  component: BaseSystemAlert,
+  args: {
+    to: 'https://google.com',
+  },
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: ['success', 'info', 'warning', 'danger'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseSystemAlert,
+  },
+  setup() {
+    function onClose() {
+      alert('close');
+    }
+
+    return { args, onClose };
+  },
+  template: `
+    <BaseSystemAlert v-bind="args" @close="onClose">
+     Tempor nisi ut ea sit pariatur aute irure magna id id ullamco cupidatat enim.
+    </BaseSystemAlert>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Closable = Template.bind({});
+Closable.args = {
+  closable: true,
+};
+
+const colors = ['info', 'success', 'warning', 'danger'];
+
+const Colors = (args) => ({
+  components: {
+    BaseSystemAlert,
+  },
+  setup() {
+    return { args, colors };
+  },
+  template: `
+  <div v-for="color in colors" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight mb-1">{{ color }}</p>
+    <BaseSystemAlert v-bind="args" :color="color">
+     Tempor nisi ut ea sit pariatur aute irure magna id id ullamco cupidatat enim.
+    </BaseSystemAlert>
+  </div>
+  `,
+});
+
+export const AllColors = Colors.bind({});
+AllColors.args = {};