@frigear-nu/ui 0.0.0-stage → 0.0.4

package/dist/runtime/components/global/IconInput.vue

@@ -0,0 +1,194 @@
+<script setup>
+import { ref, computed, watch } from "vue";
+import { useDebounceFn } from "@vueuse/core";
+const props = defineProps({
+  formItem: { type: Object, required: false, default: () => ({}) }
+});
+const model = defineModel({ type: String, ...{ default: "" } });
+const HYPHENATED_COLLECTION_PREFIXES = [
+  "material-symbols-light",
+  "material-symbols",
+  "fluent-emoji-high-contrast",
+  "fluent-emoji-flat",
+  "fluent-emoji",
+  "simple-icons",
+  "flat-color-icons",
+  "line-md",
+  "svg-spinners",
+  "vscode-icons",
+  "game-icons",
+  "file-icons",
+  "flag-icons",
+  "circle-flags",
+  "fa6-brands",
+  "fa6-regular",
+  "fa6-solid",
+  "fa-brands",
+  "fa-regular",
+  "fa-solid",
+  "skill-icons",
+  "token-branded"
+];
+function normalizeIconName(stored) {
+  if (!stored.startsWith("i-")) {
+    return stored;
+  }
+  const body = stored.slice(2);
+  if (body.includes(":")) {
+    return stored;
+  }
+  for (const prefix of HYPHENATED_COLLECTION_PREFIXES) {
+    const lead = `${prefix}-`;
+    if (body.startsWith(lead) && body.length > lead.length) {
+      return `i-${prefix}:${body.slice(lead.length)}`;
+    }
+  }
+  return stored;
+}
+const resolvedIconName = computed(() => normalizeIconName(model.value));
+const search = ref("");
+const icons = ref([]);
+const isLoading = ref(false);
+const popoverOpen = ref(false);
+function resolveIconLibraries(fieldOptions, globalLibraries) {
+  if (Array.isArray(fieldOptions) && fieldOptions.length > 0) {
+    return fieldOptions;
+  }
+  if (Array.isArray(globalLibraries) && globalLibraries.length > 0) {
+    return globalLibraries;
+  }
+  return "all";
+}
+const iconLibraries = computed(() => {
+  return resolveIconLibraries(
+    props.formItem?.options,
+    []
+  );
+});
+async function fetchIcons(query) {
+  if (!query || query.length < 2) {
+    icons.value = [];
+    return;
+  }
+  isLoading.value = true;
+  try {
+    const prefixes = iconLibraries.value === "all" ? "" : iconLibraries.value.join(",");
+    const data = await $fetch(
+      `https://api.iconify.design/search?query=${encodeURIComponent(query)}&limit=30` + (prefixes ? `&prefixes=${prefixes}` : "")
+    );
+    icons.value = data.icons || [];
+  } catch {
+    icons.value = [];
+  } finally {
+    isLoading.value = false;
+  }
+}
+const debouncedFetch = useDebounceFn(fetchIcons, 300);
+watch(search, (value) => {
+  debouncedFetch(value);
+});
+function selectIcon(icon) {
+  model.value = `i-${icon}`;
+  popoverOpen.value = false;
+  search.value = "";
+  icons.value = [];
+}
+</script>
+
+<template>
+  <div class="flex items-center gap-1">
+    <div class="flex items-center justify-center size-8 bg-muted border border-muted rounded-md shrink-0">
+      <UIcon
+        v-if="model"
+        :name="resolvedIconName"
+        class="size-5"
+      />
+      <UIcon
+        v-else
+        name="i-lucide-shapes"
+        class="size-5 text-dimmed"
+      />
+    </div>
+
+    <UInput
+      v-model="model"
+      placeholder="Select icon..."
+      class="flex-1"
+    >
+      <template #trailing>
+        <UPopover
+          v-model:open="popoverOpen"
+          :content="{ side: 'left' }"
+          :ui="{ content: 'z-auto' }"
+        >
+          <UButton
+            color="neutral"
+            variant="ghost"
+            icon="i-lucide-search"
+            class="cursor-pointer"
+          />
+
+          <template #content>
+            <div class="p-3 w-80">
+              <UInput
+                v-model="search"
+                placeholder="Find icons..."
+                icon="i-lucide-search"
+                autofocus
+                class="mb-3 w-full"
+              />
+
+              <div
+                v-if="isLoading"
+                class="flex items-center justify-center py-4"
+              >
+                <UIcon
+                  name="i-lucide-loader-2"
+                  class="size-5 animate-spin text-muted"
+                />
+              </div>
+
+              <div
+                v-else-if="icons.length > 0"
+                style="display: grid; grid-template-columns: repeat(6, 1fr);"
+                class="gap-1.5 max-h-48 overflow-y-auto"
+              >
+                <div
+                  v-for="icon in icons"
+                  :key="icon"
+                  class="flex items-center justify-center"
+                >
+                  <UTooltip :text="icon">
+                    <UButton
+                      color="neutral"
+                      variant="soft"
+                      :icon="`i-${icon}`"
+                      @click="selectIcon(icon)"
+                    />
+                  </UTooltip>
+                </div>
+              </div>
+              <p
+                v-else-if="search.length >= 2"
+                class="text-xs text-muted text-center py-4"
+              >
+                No icons found...
+              </p>
+
+              <p
+                v-else
+                class="text-sm text-muted text-center py-4"
+              >
+                e.g Lamp, Book or Dashboard
+              </p>
+
+              <p class="text-xs text-dimmed mt-2">
+                Libraries: {{ iconLibraries === "all" ? "All" : iconLibraries.join(", ") }}
+              </p>
+            </div>
+          </template>
+        </UPopover>
+      </template>
+    </UInput>
+  </div>
+</template>

package/dist/runtime/components/global/IconInput.vue.d.ts

@@ -0,0 +1,19 @@
+type FormItem = {
+    options?: string[];
+};
+type __VLS_Props = {
+    formItem?: FormItem;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    formItem: FormItem;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/global/IntervalInput.d.vue.ts

@@ -0,0 +1,10 @@
+type __VLS_ModelProps = {
+    modelValue?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/global/IntervalInput.vue

@@ -0,0 +1,51 @@
+<script setup>
+const UNIT_SECONDS = {
+  minutes: 60,
+  hours: 3600,
+  days: 86400
+};
+const units = [
+  { label: "Minutes", value: "minutes" },
+  { label: "Hours", value: "hours" },
+  { label: "Days", value: "days" }
+];
+const seconds = defineModel({ type: Number, ...{ default: 86400 } });
+const unit = ref("days");
+const amount = ref(1);
+function secondsToUnit(secs, u) {
+  return Math.round(secs / UNIT_SECONDS[u]);
+}
+function bestUnit(secs) {
+  if (secs % UNIT_SECONDS.days === 0) return "days";
+  if (secs % UNIT_SECONDS.hours === 0) return "hours";
+  return "minutes";
+}
+watch(seconds, (secs) => {
+  const u = bestUnit(secs);
+  unit.value = u;
+  amount.value = secondsToUnit(secs, u);
+}, { immediate: true });
+function onUpdate() {
+  const minSeconds = 60;
+  const raw = (amount.value || 1) * UNIT_SECONDS[unit.value];
+  seconds.value = Math.max(minSeconds, raw);
+}
+</script>
+
+<template>
+  <div class="flex gap-2 w-full">
+    <UInputNumber
+      v-model="amount"
+      class="flex-1"
+      :min="1"
+      @update:model-value="onUpdate"
+    />
+    <USelectMenu
+      v-model="unit"
+      :items="units"
+      value-key="value"
+      class="w-32"
+      @update:model-value="onUpdate"
+    />
+  </div>
+</template>

package/dist/runtime/components/global/IntervalInput.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_ModelProps = {
+    modelValue?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/global/MonacoCodeEditor.d.vue.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    language?: string;
+    height?: string;
+    fullscreen?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    language: string;
+    height: string;
+    fullscreen: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/global/MonacoCodeEditor.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { ref, computed } from "vue";
+const props = defineProps({
+  language: { type: String, required: false, default: "typescript" },
+  height: { type: String, required: false, default: "160px" },
+  fullscreen: { type: Boolean, required: false, default: true }
+});
+const modelValue = defineModel({ type: String });
+const isModalOpen = ref(false);
+const editorOptions = {
+  minimap: { enabled: false },
+  scrollBeyondLastLine: false,
+  fontSize: 13,
+  tabSize: 2,
+  theme: "vs-dark"
+};
+const slotName = computed(() => {
+  return props.fullscreen ? "body" : "content";
+});
+</script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <div class="relative">
+      <MonacoEditor
+        v-model="modelValue"
+        :lang="language"
+        :options="editorOptions"
+        class="rounded-md overflow-hidden border border-default"
+        :style="{ height }"
+      >
+        <div
+          class="rounded-md border border-default bg-muted animate-pulse"
+          :style="{ height }"
+        />
+      </MonacoEditor>
+      <UButton
+        v-if="!isModalOpen"
+        size="xs"
+        variant="ghost"
+        icon="i-lucide-expand"
+        class="absolute top-1 right-1 z-10 opacity-70 hover:opacity-100"
+        title="Expand editor"
+        @click="isModalOpen = true"
+      />
+    </div>
+
+    <UModal
+      v-model:open="isModalOpen"
+      title="Code Editor"
+      :fullscreen="fullscreen"
+      :ui="{ footer: 'justify-end' }"
+    >
+      <template #[slotName]>
+        <MonacoEditor
+          v-model="modelValue"
+          :lang="language"
+          :options="editorOptions"
+          class="rounded-md overflow-hidden border border-default"
+          :style="{
+  height: fullscreen ? 'calc(100vh - 200px)' : '480px'
+}"
+        />
+        <div v-if="slotName === 'content'">
+          <div class="flex justify-end">
+            <UButton @click="isModalOpen = false">
+              Close
+            </UButton>
+          </div>
+        </div>
+      </template>
+      <template #footer>
+        <UButton @click="isModalOpen = false">
+          Close
+        </UButton>
+      </template>
+    </UModal>
+  </div>
+</template>

package/dist/runtime/components/global/MonacoCodeEditor.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    language?: string;
+    height?: string;
+    fullscreen?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    language: string;
+    height: string;
+    fullscreen: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/global/MoneyInput.d.vue.ts

@@ -0,0 +1,25 @@
+type Currency = {
+    name?: string;
+    code: string;
+    symbol: string;
+};
+type MoneyValue = {
+    currency: Currency['code'];
+    amount: number | null | undefined;
+};
+type __VLS_ModelProps = {
+    modelValue?: MoneyValue;
+    'amount'?: number | null | undefined;
+    'currency'?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: MoneyValue) => any;
+    "update:amount": (value: number | null | undefined) => any;
+    "update:currency": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: MoneyValue) => any) | undefined;
+    "onUpdate:amount"?: ((value: number | null | undefined) => any) | undefined;
+    "onUpdate:currency"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/global/MoneyInput.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { fromCents, toCents } from "#shared/utils/money.ts";
+import { useCurrencies } from "~/store/queries/system.ts";
+const model = defineModel({ type: Object, ...{
+  default: () => ({ currency: "EUR", amount: 0 })
+} });
+const amount = defineModel("amount", { type: null, ...{
+  get: () => fromCents(model.value?.amount),
+  set: (newValue) => model.value = { ...model.value, amount: toCents(newValue) }
+} });
+const currencyCode = defineModel("currency", { type: String, ...{
+  get: () => model.value?.currency || "EUR",
+  set: (newValue) => model.value = { ...model.value, currency: newValue }
+} });
+const { data: currencies, status } = useCurrencies();
+const code = computed(() => currencyCode.value || "USD");
+</script>
+
+<template>
+  <UFieldGroup class="w-full">
+    <USelectMenu
+      v-model="currencyCode"
+      :items="currencies"
+      value-key="code"
+      :search-input="{
+  placeholder: 'Search currency...',
+  icon: 'i-lucide-search',
+  loading: status === 'pending'
+}"
+      :filter-fields="['name', 'code', 'symbol']"
+      :content="{ align: 'start' }"
+      :ui="{
+  base: 'pe-8',
+  content: 'w-48',
+  placeholder: 'hidden',
+  trailingIcon: 'size-4'
+}"
+      trailing-icon="i-lucide-chevrons-up-down"
+    >
+      <span class="size-5 w-9 flex items-center text-lg">
+        {{ code }}
+      </span>
+
+      <template #item-label="{ item }">
+        {{ item.code }} ({{ item.symbol }})
+      </template>
+    </USelectMenu>
+
+    <UInputNumber
+      v-model="amount"
+      class="w-full"
+      placeholder="0.00"
+      :step="1"
+      :step-snapping="false"
+      :style="{ '--dial-code-length': `${code.length + 1.5}ch` }"
+      :ui="{
+  base: 'ps-(--dial-code-length)'
+}"
+      :format-options="{
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2
+}"
+    />
+  </UFieldGroup>
+</template>

package/dist/runtime/components/global/MoneyInput.vue.d.ts

@@ -0,0 +1,25 @@
+type Currency = {
+    name?: string;
+    code: string;
+    symbol: string;
+};
+type MoneyValue = {
+    currency: Currency['code'];
+    amount: number | null | undefined;
+};
+type __VLS_ModelProps = {
+    modelValue?: MoneyValue;
+    'amount'?: number | null | undefined;
+    'currency'?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: MoneyValue) => any;
+    "update:amount": (value: number | null | undefined) => any;
+    "update:currency": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: MoneyValue) => any) | undefined;
+    "onUpdate:amount"?: ((value: number | null | undefined) => any) | undefined;
+    "onUpdate:currency"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/global/SwitchToggle.d.vue.ts

@@ -0,0 +1,10 @@
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/global/SwitchToggle.vue

@@ -0,0 +1,9 @@
+<script setup>
+const modelValue = defineModel({ type: Boolean });
+</script>
+
+<template>
+  <USwitch
+    v-model="modelValue"
+  />
+</template>

package/dist/runtime/components/global/SwitchToggle.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/global/TagInput.d.vue.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    placeholder?: string;
+    searchPlaceholder?: string;
+    multiple?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {
+    placeholder: string;
+    searchPlaceholder: string;
+    multiple: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/global/TagInput.vue

@@ -0,0 +1,15 @@
+<script setup>
+defineProps({
+  placeholder: { type: String, required: false, default: "Add tags..." },
+  searchPlaceholder: { type: String, required: false, default: "Type here to create a tag..." },
+  multiple: { type: Boolean, required: false, default: true }
+});
+const model = defineModel({ type: Array, ...{ default: () => [] } });
+</script>
+
+<template>
+  <UInputTags
+    v-model="model"
+    :placeholder="placeholder"
+  />
+</template>

package/dist/runtime/components/global/TagInput.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    placeholder?: string;
+    searchPlaceholder?: string;
+    multiple?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {
+    placeholder: string;
+    searchPlaceholder: string;
+    multiple: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/global/UrlInput.d.vue.ts

@@ -0,0 +1,12 @@
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+    success: (args_0: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    onSuccess?: ((args_0: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/global/UrlInput.vue

@@ -0,0 +1,28 @@
+<script setup>
+const modelValue = defineModel({ type: String });
+const $emits = defineEmits(["success"]);
+const errors = ref([]);
+const model = computed({
+  get: () => modelValue.value,
+  set: (value) => {
+    modelValue.value = value;
+    errors.value = [];
+    if (!value) return;
+    if (!value.startsWith("http://") && !value.startsWith("https://")) {
+      errors.value.push(
+        "URL must start with http:// or https://"
+      );
+      return;
+    }
+    $emits("success", value);
+  }
+});
+</script>
+
+<template>
+  <UInput
+    v-model="model"
+    type="url"
+    :errors="errors"
+  />
+</template>