sprintify-ui 0.4.5 → 0.4.6

package/src/components/BaseCardRow.vue

@@ -1,34 +1,34 @@
-<template>
-  <div class="border-t border-slate-300 first:border-t-0">
-    <div :class="paddingClass">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  props: {
-    size: {
-      default: 'base',
-      type: String,
-    },
-  },
-  computed: {
-    paddingClass(): string {
-      if (this.size == 'xs') {
-        return 'md:p-3 p-2';
-      }
-      if (this.size == 'sm') {
-        return 'md:p-4 p-3';
-      }
-      if (this.size == 'lg') {
-        return 'md:p-8 p-6';
-      }
-      return 'md:p-6 px-4 py-5';
-    },
-  },
-});
-</script>
+<template>
+  <div class="border-t border-slate-300 first:border-t-0">
+    <div :class="paddingClass">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    size: {
+      default: 'base',
+      type: String,
+    },
+  },
+  computed: {
+    paddingClass(): string {
+      if (this.size == 'xs') {
+        return 'md:p-3 p-2';
+      }
+      if (this.size == 'sm') {
+        return 'md:p-4 p-3';
+      }
+      if (this.size == 'lg') {
+        return 'md:p-8 p-6';
+      }
+      return 'md:p-6 px-4 py-5';
+    },
+  },
+});
+</script>

package/src/components/BaseCharacterCounter.stories.js

@@ -1,30 +1,30 @@
-import BaseCharacterCounter from './BaseCharacterCounter.vue';
-import BaseInput from '@/components/BaseInput.vue';
-
-export default {
-  title: 'Data/BaseCharacterCounter',
-  component: BaseCharacterCounter,
-  args: {
-    text: 'Test',
-    max: 100,
-    min: 10,
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    BaseCharacterCounter,
-    BaseInput,
-  },
-  setup() {
-    const text = ref('bla bla');
-    return { args, text };
-  },
-  template: `
-    <BaseInput v-model="text" name="test" class="w-full mb-1"></BaseInput>
-    <BaseCharacterCounter v-bind="args" :text="text" class="text-xs text-slate-500"></BaseCharacterCounter>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
+import BaseCharacterCounter from './BaseCharacterCounter.vue';
+import BaseInput from '@/components/BaseInput.vue';
+
+export default {
+  title: 'Data/BaseCharacterCounter',
+  component: BaseCharacterCounter,
+  args: {
+    text: 'Test',
+    max: 100,
+    min: 10,
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseCharacterCounter,
+    BaseInput,
+  },
+  setup() {
+    const text = ref('bla bla');
+    return { args, text };
+  },
+  template: `
+    <BaseInput v-model="text" name="test" class="w-full mb-1"></BaseInput>
+    <BaseCharacterCounter v-bind="args" :text="text" class="text-xs text-slate-500"></BaseCharacterCounter>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseCharacterCounter.vue

@@ -1,64 +1,64 @@
-<template>
-  <div>
-    <div
-      v-if="max && (!min || length >= min)"
-      :class="{
-        'text-red-600': length > max,
-      }"
-    >
-      {{ length }}/{{ max }}
-    </div>
-    <div
-      v-else-if="min && length < min"
-      class="text-red-600"
-    >
-      {{ t('sui.min_x_characters', { x: min }) }} ({{ length }}/{{ min }})
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { trim } from 'lodash';
-import { t } from '@/i18n';
-
-const props = defineProps({
-  text: {
-    required: true,
-    type: String,
-  },
-  min: {
-    default: undefined,
-    type: Number,
-  },
-  max: {
-    default: undefined,
-    type: Number,
-  },
-  trim: {
-    default: true,
-    type: Boolean,
-  },
-  removeDoubleSpaces: {
-    default: true,
-    type: Boolean,
-  },
-});
-
-const trimmedText = computed(() => {
-  let text = props.text;
-
-  if (props.trim) {
-    text = trim(props.text);
-  }
-
-  if (props.removeDoubleSpaces) {
-    text = text.replace(/ +(?= )/g, '');
-  }
-
-  return text;
-});
-
-const length = computed(() => {
-  return trimmedText.value.length;
-});
-</script>
+<template>
+  <div>
+    <div
+      v-if="max && (!min || length >= min)"
+      :class="{
+        'text-red-600': length > max,
+      }"
+    >
+      {{ length }}/{{ max }}
+    </div>
+    <div
+      v-else-if="min && length < min"
+      class="text-red-600"
+    >
+      {{ t('sui.min_x_characters', { x: min }) }} ({{ length }}/{{ min }})
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { trim } from 'lodash';
+import { t } from '@/i18n';
+
+const props = defineProps({
+  text: {
+    required: true,
+    type: String,
+  },
+  min: {
+    default: undefined,
+    type: Number,
+  },
+  max: {
+    default: undefined,
+    type: Number,
+  },
+  trim: {
+    default: true,
+    type: Boolean,
+  },
+  removeDoubleSpaces: {
+    default: true,
+    type: Boolean,
+  },
+});
+
+const trimmedText = computed(() => {
+  let text = props.text;
+
+  if (props.trim) {
+    text = trim(props.text);
+  }
+
+  if (props.removeDoubleSpaces) {
+    text = text.replace(/ +(?= )/g, '');
+  }
+
+  return text;
+});
+
+const length = computed(() => {
+  return trimmedText.value.length;
+});
+</script>

package/src/components/BaseClickOutside.vue

@@ -1,37 +1,37 @@
-<template>
-  <div ref="root">
-    <slot />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useClickOutside } from '@/composables/clickOutside';
-import { MaybeElement } from '@vueuse/core';
-import { MaybeRef } from '@vueuse/shared';
-import { PropType } from 'vue';
-
-const props = defineProps({
-  includes: {
-    type: Array as PropType<(MaybeRef<MaybeElement> | string)[]>,
-    default: () => [],
-  },
-});
-
-const emit = defineEmits(['clickOutside']);
-
-const root = ref<null | HTMLElement>(null);
-
-const includes = [] as (MaybeRef<MaybeElement> | string)[];
-
-function addInclude(include: MaybeRef<MaybeElement> | string) {
-  includes.push(include);
-}
-
-provide('clickOutside:addInclude', addInclude);
-
-useClickOutside(root, () => emit('clickOutside'), {
-  includes: () => {
-    return [...includes, ...props.includes];
-  },
-});
-</script>
+<template>
+  <div ref="root">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useClickOutside } from '@/composables/clickOutside';
+import { MaybeElement } from '@vueuse/core';
+import { MaybeRef } from '@vueuse/shared';
+import { PropType } from 'vue';
+
+const props = defineProps({
+  includes: {
+    type: Array as PropType<(MaybeRef<MaybeElement> | string)[]>,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['clickOutside']);
+
+const root = ref<null | HTMLElement>(null);
+
+const includes = [] as (MaybeRef<MaybeElement> | string)[];
+
+function addInclude(include: MaybeRef<MaybeElement> | string) {
+  includes.push(include);
+}
+
+provide('clickOutside:addInclude', addInclude);
+
+useClickOutside(root, () => emit('clickOutside'), {
+  includes: () => {
+    return [...includes, ...props.includes];
+  },
+});
+</script>

package/src/components/BaseClipboard.stories.js

@@ -1,32 +1,32 @@
-import BaseClipboard from './BaseClipboard.vue';
-
-export default {
-  title: 'Components/BaseClipboard',
-  component: BaseClipboard,
-  args: {},
-  argTypes: {},
-};
-
-const Template = (args) => ({
-  components: { BaseClipboard },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseClipboard v-bind="args" class="mb-3">
-      <span class="underline text-blue-600">{{ args.value }}</span>
-    </BaseClipboard>
-
-    <br>
-
-    <BaseClipboard v-bind="args" class="mb-3 border border-slate-200 rounded px-2 py-px">
-      <BaseIcon icon="heroicons:server" class="mr-2 text-slate-500" />
-      <span class="font-mono text-sm text-slate-600">{{ args.value }}</span>
-    </BaseClipboard>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {
-  value: '168.192.0.1',
-};
+import BaseClipboard from './BaseClipboard.vue';
+
+export default {
+  title: 'Components/BaseClipboard',
+  component: BaseClipboard,
+  args: {},
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: { BaseClipboard },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseClipboard v-bind="args" class="mb-3">
+      <span class="underline text-blue-600">{{ args.value }}</span>
+    </BaseClipboard>
+
+    <br>
+
+    <BaseClipboard v-bind="args" class="mb-3 border border-slate-200 rounded px-2 py-px">
+      <BaseIcon icon="heroicons:server" class="mr-2 text-slate-500" />
+      <span class="font-mono text-sm text-slate-600">{{ args.value }}</span>
+    </BaseClipboard>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  value: '168.192.0.1',
+};

package/src/components/BaseClipboard.vue

@@ -1,83 +1,83 @@
-<template>
-  <button
-    ref="btn"
-    type="button"
-    class="relative inline-flex items-center"
-  >
-    <slot />
-  </button>
-</template>
-
-<script lang="ts" setup>
-import { t } from '@/i18n';
-import { useTippy } from 'vue-tippy'
-import 'tippy.js/dist/tippy.css'
-
-const showCopied = ref(false);
-
-const props = defineProps({
-  value: {
-    default: null,
-    type: String,
-  },
-});
-
-const btn = ref();
-
-const content = computed(() => {
-  return showCopied.value ?
-    `<div class="flex items-center">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-1 text-green-500">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-      </svg>
-      ${t('sui.copied')}
-    </div>` :
-
-    t('sui.click_to_copy')
-})
-
-useTippy(btn, {
-  content: content,
-  placement: 'auto',
-  interactive: true,
-  hideOnClick: 'toggle',
-  trigger: 'mouseenter click',
-  allowHTML: true,
-  onTrigger(instance, event) {
-    if (event.type === 'click') {
-      copyText(instance)
-    }
-  },
-})
-
-async function writeText(text: string) {
-  if (
-    typeof navigator === 'undefined' ||
-    !navigator.clipboard ||
-    !navigator.clipboard.writeText
-  ) {
-    throw new Error('Clipboard API not available in this browser');
-  }
-
-  await navigator.clipboard.writeText(text);
-}
-
-let timeoutId = undefined as undefined | number;
-
-function copyText(instance: any) {
-
-  writeText(props.value);
-  showSuccessMessage(instance);
-}
-
-function showSuccessMessage(instance: any) {
-  showCopied.value = true;
-  timeoutId = setTimeout(() => {
-    instance.hide();
-    clearTimeout(timeoutId);
-    setTimeout(() => {
-      showCopied.value = false;
-    }, 200);
-  }, 1600);
-}
-</script>
+<template>
+  <button
+    ref="btn"
+    type="button"
+    class="relative inline-flex items-center"
+  >
+    <slot />
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { t } from '@/i18n';
+import { useTippy } from 'vue-tippy'
+import 'tippy.js/dist/tippy.css'
+
+const showCopied = ref(false);
+
+const props = defineProps({
+  value: {
+    default: null,
+    type: String,
+  },
+});
+
+const btn = ref();
+
+const content = computed(() => {
+  return showCopied.value ?
+    `<div class="flex items-center">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-1 text-green-500">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+      ${t('sui.copied')}
+    </div>` :
+
+    t('sui.click_to_copy')
+})
+
+useTippy(btn, {
+  content: content,
+  placement: 'auto',
+  interactive: true,
+  hideOnClick: 'toggle',
+  trigger: 'mouseenter click',
+  allowHTML: true,
+  onTrigger(instance, event) {
+    if (event.type === 'click') {
+      copyText(instance)
+    }
+  },
+})
+
+async function writeText(text: string) {
+  if (
+    typeof navigator === 'undefined' ||
+    !navigator.clipboard ||
+    !navigator.clipboard.writeText
+  ) {
+    throw new Error('Clipboard API not available in this browser');
+  }
+
+  await navigator.clipboard.writeText(text);
+}
+
+let timeoutId = undefined as undefined | number;
+
+function copyText(instance: any) {
+
+  writeText(props.value);
+  showSuccessMessage(instance);
+}
+
+function showSuccessMessage(instance: any) {
+  showCopied.value = true;
+  timeoutId = setTimeout(() => {
+    instance.hide();
+    clearTimeout(timeoutId);
+    setTimeout(() => {
+      showCopied.value = false;
+    }, 200);
+  }, 1600);
+}
+</script>

package/src/components/BaseColor.stories.js

@@ -1,46 +1,46 @@
-import { createFieldStory } from '../../.storybook/utils';
-import BaseColor from './BaseColor.vue';
-import ShowValue from '../../.storybook/components/ShowValue.vue';
-
-export default {
-  title: 'Form/BaseColor',
-  component: BaseColor,
-  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
-};
-
-const Template = (args) => ({
-  components: { BaseColor, ShowValue },
-  setup() {
-    const value = ref(null);
-    return { args, value };
-  },
-  template: `
-    <BaseColor v-model="value" v-bind="args"></BaseColor>
-    <ShowValue :value="value"></ShowValue>
-  `,
-});
-
-export const Single = Template.bind({});
-Single.args = {};
-
-export const SingleRequired = Template.bind({});
-SingleRequired.args = {
-  required: true,
-};
-
-export const Multiple = Template.bind({});
-Multiple.args = {
-  multiple: true,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-  modelValue: '#16a34a',
-};
-
-export const Field = createFieldStory({
-  component: BaseColor,
-  componentName: 'BaseColor',
-  label: 'Choose your favorite color',
-});
+import { createFieldStory } from '../../.storybook/utils';
+import BaseColor from './BaseColor.vue';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
+
+export default {
+  title: 'Form/BaseColor',
+  component: BaseColor,
+  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
+};
+
+const Template = (args) => ({
+  components: { BaseColor, ShowValue },
+  setup() {
+    const value = ref(null);
+    return { args, value };
+  },
+  template: `
+    <BaseColor v-model="value" v-bind="args"></BaseColor>
+    <ShowValue :value="value"></ShowValue>
+  `,
+});
+
+export const Single = Template.bind({});
+Single.args = {};
+
+export const SingleRequired = Template.bind({});
+SingleRequired.args = {
+  required: true,
+};
+
+export const Multiple = Template.bind({});
+Multiple.args = {
+  multiple: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  modelValue: '#16a34a',
+};
+
+export const Field = createFieldStory({
+  component: BaseColor,
+  componentName: 'BaseColor',
+  label: 'Choose your favorite color',
+});