sprintify-ui 0.1.17 → 0.1.18

package/src/components/BaseCharacterCounter.vue

@@ -1,61 +1,61 @@
-<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></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></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,31 +1,31 @@
-import BaseClipboard from './BaseClipboard.vue';
-
-export default {
-  title: 'Components/BaseClipboard',
-  component: BaseClipboard,
-  argTypes: {},
-};
-
-const Template = (args) => ({
-  components: { BaseClipboard },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseClipboard class="mb-3">
-      <span class="underline text-blue-600">{{ args.value }}</span>
-    </BaseClipboard>
-
-    <br>
-
-    <BaseClipboard 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,
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: { BaseClipboard },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseClipboard class="mb-3">
+      <span class="underline text-blue-600">{{ args.value }}</span>
+    </BaseClipboard>
+
+    <br>
+
+    <BaseClipboard 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,96 +1,96 @@
-<template>
-  <button
-    type="button"
-    class="relative inline-flex items-center"
-    @click="copyText()"
-    @mouseenter="showTooltip()"
-    @mouseleave="hideTooltip()"
-  >
-    <slot></slot>
-    <transition
-      enter-active-class="transition duration-200 ease-out"
-      enter-from-class="transform scale-90 opacity-0"
-      enter-to-class="transform scale-100 opacity-100"
-      leave-active-class="transition duration-75 ease-in"
-      leave-from-class="transform scale-100 opacity-100"
-      leave-to-class="transform scale-90 opacity-0"
-    >
-      <div
-        v-show="tooltipShown"
-        class="pointer-events-none absolute left-full z-[1] items-center"
-      >
-        <div
-          class="ml-2 whitespace-nowrap rounded bg-slate-900 bg-opacity-80 px-3 py-2 text-xs leading-tight text-white backdrop-blur"
-        >
-          <div v-if="showCopied" class="flex items-center">
-            <BaseIcon
-              class="mr-1 text-green-500"
-              icon="heroicons:check-circle-solid"
-            />
-            {{ t('sui.copied') }}
-          </div>
-          <div v-else>
-            {{ t('sui.click_to_copy') }}
-          </div>
-        </div>
-      </div>
-    </transition>
-  </button>
-</template>
-
-<script lang="ts" setup>
-import { t } from '@/i18n';
-
-const tooltipShown = ref(false);
-const showCopied = ref(false);
-
-const props = defineProps({
-  value: {
-    default: null,
-    type: String,
-  },
-});
-
-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 = null as null | number;
-
-function showTooltip() {
-  tooltipShown.value = true;
-}
-
-function hideTooltip() {
-  tooltipShown.value = false;
-  setTimeout(() => {
-    showCopied.value = false;
-  }, 200);
-  if (timeoutId) {
-    clearTimeout(timeoutId);
-  }
-}
-
-function copyText() {
-  writeText(props.value);
-  showSuccessMessage();
-}
-
-function showSuccessMessage() {
-  showCopied.value = true;
-  timeoutId = setTimeout(() => {
-    tooltipShown.value = false;
-    setTimeout(() => {
-      showCopied.value = false;
-    }, 200);
-  }, 1600);
-}
-</script>
+<template>
+  <button
+    type="button"
+    class="relative inline-flex items-center"
+    @click="copyText()"
+    @mouseenter="showTooltip()"
+    @mouseleave="hideTooltip()"
+  >
+    <slot></slot>
+    <transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="transform scale-90 opacity-0"
+      enter-to-class="transform scale-100 opacity-100"
+      leave-active-class="transition duration-75 ease-in"
+      leave-from-class="transform scale-100 opacity-100"
+      leave-to-class="transform scale-90 opacity-0"
+    >
+      <div
+        v-show="tooltipShown"
+        class="pointer-events-none absolute left-full z-[1] items-center"
+      >
+        <div
+          class="ml-2 whitespace-nowrap rounded bg-slate-900 bg-opacity-80 px-3 py-2 text-xs leading-tight text-white backdrop-blur"
+        >
+          <div v-if="showCopied" class="flex items-center">
+            <BaseIcon
+              class="mr-1 text-green-500"
+              icon="heroicons:check-circle-solid"
+            />
+            {{ t('sui.copied') }}
+          </div>
+          <div v-else>
+            {{ t('sui.click_to_copy') }}
+          </div>
+        </div>
+      </div>
+    </transition>
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { t } from '@/i18n';
+
+const tooltipShown = ref(false);
+const showCopied = ref(false);
+
+const props = defineProps({
+  value: {
+    default: null,
+    type: String,
+  },
+});
+
+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 = null as null | number;
+
+function showTooltip() {
+  tooltipShown.value = true;
+}
+
+function hideTooltip() {
+  tooltipShown.value = false;
+  setTimeout(() => {
+    showCopied.value = false;
+  }, 200);
+  if (timeoutId) {
+    clearTimeout(timeoutId);
+  }
+}
+
+function copyText() {
+  writeText(props.value);
+  showSuccessMessage();
+}
+
+function showSuccessMessage() {
+  showCopied.value = true;
+  timeoutId = setTimeout(() => {
+    tooltipShown.value = false;
+    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',
+});