@shopware-ag/meteor-component-library
Version:
The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).
243 lines (242 loc) • 9.54 kB
JavaScript
import '../mt-url-field.css';
import { defineComponent, mergeModels, useModel, useId, ref, computed, watch, openBlock, createElementBlock, normalizeClass, unref, createBlock, withCtx, createTextVNode, toDisplayString, createCommentVNode, createElementVNode, createVNode, withModifiers, mergeProps, renderSlot } from "vue";
import { _ as _sfc_main$1 } from "../mt-icon.vue_vue_type_style_index_0_lang-2cc5f73e.mjs";
import MtFieldLabel from "./MtFieldLabel.js";
import MtHelpText from "./MtHelpText.js";
import MtFieldError from "./MtFieldError.js";
import MtTooltip from "./MtTooltip.js";
import { u as useClipboard } from "../index-c0f92ea5.mjs";
import { useI18n } from "vue-i18n";
import { u as useFutureFlags } from "../useFutureFlags-2be3e179.mjs";
import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.mjs";
import "./MtInheritanceSwitch.js";
import "../floating-ui.vue-fe27ebef.mjs";
import "../floating-ui.dom-f450fda4.mjs";
import "../useIsInsideTooltip-0c3bd290.mjs";
import "../index-221bad05.mjs";
import "./MtText.js";
const _hoisted_1 = ["disabled", "data-size"];
const _hoisted_2 = ["id", "value", "placeholder", "name", "required", "disabled"];
const _hoisted_3 = ["aria-label"];
const _hoisted_4 = {
key: 1,
class: "mt-url-field__affix mt-url-field__affix--suffix"
};
const _hoisted_5 = {
key: 2,
class: "mt-url-field__hint"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "mt-url-field",
props: /* @__PURE__ */ mergeModels({
omitUrlHash: { type: Boolean },
omitUrlSearch: { type: Boolean },
copyable: { type: Boolean },
error: {},
label: {},
required: { type: Boolean },
isInheritanceField: { type: Boolean },
isInherited: { type: Boolean },
helpText: {},
disabled: { type: Boolean },
placeholder: {},
name: {},
size: { default: "default" }
}, {
"modelValue": {
type: String
},
"modelModifiers": {}
}),
emits: /* @__PURE__ */ mergeModels(["change", "inheritance-remove", "inheritance-restore"], ["update:modelValue"]),
setup(__props) {
const futureFlags = useFutureFlags();
const URL_REGEX = {
PROTOCOL: /([a-zA-Z0-9]+:\/\/)+/,
PROTOCOL_HTTP: /^https?:\/\//,
SSL: /^\s*https:\/\//,
TRAILING_SLASH: /\/+$/
};
const modelValue = useModel(__props, "modelValue");
const props = __props;
const id = useId();
const currentValue = ref(modelValue.value);
const sslActive = ref(true);
const urlPrefix = computed(() => {
return sslActive.value ? "https://" : "http://";
});
const url = computed(() => {
var _a;
const trimmedValue = (_a = currentValue.value) == null ? void 0 : _a.trim();
if (!trimmedValue)
return "";
return `${urlPrefix.value}${trimmedValue}`;
});
watch(
() => modelValue.value,
() => {
const result = checkInput(modelValue.value || "");
currentValue.value = result;
},
{ immediate: true }
);
function checkInput(inputValue) {
if (!inputValue.length)
return "";
if (inputValue.match(URL_REGEX.PROTOCOL_HTTP)) {
sslActive.value = !!inputValue.match(URL_REGEX.SSL);
}
const validated = transformURL(inputValue);
if (!validated) {
throw new Error("Invalid URL");
} else {
return validated;
}
}
function transformURL(value) {
const url2 = new URL(value.match(URL_REGEX.PROTOCOL) ? value : `${urlPrefix.value}${value}`);
if (!url2)
return null;
if (props.omitUrlSearch)
url2.search = "";
if (props.omitUrlHash)
url2.hash = "";
const removeTrailingSlash = url2.hash === "" && url2.search === "" ? URL_REGEX.TRAILING_SLASH : "";
return url2.toString().replace(URL_REGEX.PROTOCOL, "").replace(removeTrailingSlash, "").replace(url2.host, decodeURI(url2.host));
}
const { copy, copied } = useClipboard();
const { t } = useI18n({
messages: {
de: {
copyTooltip: "URL in Zwischenablage kopieren",
copyButtonDescription: "URL in Zwischenablage kopieren",
copyButtonDescriptionValueCopied: "URL in Zwischenablage kopiert"
},
en: {
copyTooltip: "Copy URL to clipboard",
copyButtonDescription: "Copy URL to clipboard",
copyButtonDescriptionValueCopied: "Copied URL to clipboard"
}
}
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass([
"mt-url-field",
{
"mt-url-field--future-remove-default-margin": unref(futureFlags).removeDefaultMargin
}
])
}, [
!!_ctx.label ? (openBlock(), createBlock(MtFieldLabel, {
key: 0,
for: unref(id),
style: { marginBottom: "var(--scale-size-2)", gridArea: "label" },
"has-error": !!_ctx.error,
required: _ctx.required,
inheritance: !_ctx.isInheritanceField ? "none" : _ctx.isInherited ? "linked" : "unlinked",
"onUpdate:inheritance": _cache[0] || (_cache[0] = ($event) => {
if (_ctx.isInherited) {
_ctx.$emit("inheritance-remove");
} else {
_ctx.$emit("inheritance-restore");
}
})
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(_ctx.label), 1)
]),
_: 1
}, 8, ["for", "has-error", "required", "inheritance"])) : createCommentVNode("", true),
!!_ctx.helpText ? (openBlock(), createBlock(MtHelpText, {
key: 1,
text: _ctx.helpText,
style: { gridArea: "help-text" }
}, null, 8, ["text"])) : createCommentVNode("", true),
createElementVNode("div", {
class: normalizeClass([
"mt-url-field__block",
`mt-url-field__block--size-${_ctx.size}`,
{
"mt-url-field__block--error": !!_ctx.error
}
])
}, [
createElementVNode("button", {
type: "button",
class: "mt-url-field__protocol-toggle",
disabled: _ctx.disabled || _ctx.isInherited,
"data-size": _ctx.size,
onClick: _cache[1] || (_cache[1] = () => {
sslActive.value = !sslActive.value;
modelValue.value = url.value;
})
}, [
createVNode(_sfc_main$1, {
name: sslActive.value ? "solid-lock" : "solid-lock-open",
color: sslActive.value ? "var(--color-icon-positive-default)" : "var(--color-icon-primary-default)",
size: "var(--scale-size-12)",
"aria-hidden": "true"
}, null, 8, ["name", "color"]),
createElementVNode("span", null, toDisplayString(urlPrefix.value), 1)
], 8, _hoisted_1),
createElementVNode("input", {
id: unref(id),
value: decodeURI(currentValue.value || ""),
type: "url",
placeholder: _ctx.placeholder,
name: _ctx.name,
required: _ctx.required,
disabled: _ctx.disabled || _ctx.isInherited,
class: "mt-url-field__input",
onInput: _cache[2] || (_cache[2] = (event) => {
const result = checkInput(event.target.value);
currentValue.value = result;
modelValue.value = url.value;
}),
onChange: _cache[3] || (_cache[3] = withModifiers(($event) => _ctx.$emit("change", $event.target.value || ""), ["stop"]))
}, null, 40, _hoisted_2),
_ctx.copyable ? (openBlock(), createBlock(MtTooltip, {
key: 0,
content: unref(t)("copyTooltip")
}, {
default: withCtx((params) => [
createElementVNode("button", mergeProps({ type: "button" }, params, {
class: "mt-url-field__copy-button",
"aria-label": unref(copied) ? unref(t)("copyButtonDescriptionValueCopied") : unref(t)("copyButtonDescription"),
onClick: _cache[4] || (_cache[4] = () => {
if (!currentValue.value)
return;
unref(copy)(currentValue.value);
})
}), [
createVNode(_sfc_main$1, {
name: unref(copied) ? "regular-checkmark" : "regular-copy",
size: "var(--scale-size-18)",
color: "var(--color-icon-primary-default)"
}, null, 8, ["name"])
], 16, _hoisted_3)
]),
_: 1
}, 8, ["content"])) : createCommentVNode("", true),
_ctx.$slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_4, [
renderSlot(_ctx.$slots, "suffix", {}, void 0, true)
])) : createCommentVNode("", true)
], 2),
createVNode(MtFieldError, {
error: _ctx.error,
style: { gridArea: "error" }
}, null, 8, ["error"]),
_ctx.$slots.hint ? (openBlock(), createElementBlock("div", _hoisted_5, [
renderSlot(_ctx.$slots, "hint", {}, void 0, true)
])) : createCommentVNode("", true)
], 2);
};
}
});
const mtUrlField_vue_vue_type_style_index_0_scoped_7594679e_lang = "";
const mtUrlField = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7594679e"]]);
export {
mtUrlField as default
};
//# sourceMappingURL=MtUrlField.js.map