@obewds/vue-el

Appearance

On this page

@obewds/vue-el Component

Vue Component Code

Pure Vue.js version

vue
<script setup lang="ts">

    import { elementTags } from '@obewds/vue-validators'
    import { isEmptyOrUnsupportedElement } from '@obewds/vue-component-helpers'

    const props = defineProps({
        tag: {
            type: String,
            required: true,
            validator: (prop: string): boolean => (elementTags).includes(prop),
        },
        text: {
            type: String,
            default: '',
        },
    })

    function emptyElementOrUnsupportedError(tag: string): boolean {

        return isEmptyOrUnsupportedElement(tag)

    }

</script>


<template>

    <template v-if="emptyElementOrUnsupportedError(tag)"></template>

	<template v-else>

		<component :is="tag">
			<template v-if="text">
				{{ text }}
			</template>
			<template v-else>
				<slot>VueEl</slot>
			</template>
		</component>

	</template>

</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

ES Module Version

ESM version

js
import { defineComponent as m, openBlock as r, createElementBlock as n, Fragment as o, createBlock as i, resolveDynamicComponent as u, withCtx as c, createTextVNode as a, toDisplayString as p, renderSlot as d } from "vue";
import { elementTags as s } from "@obewds/vue-validators";
import { isEmptyOrUnsupportedElement as y } from "@obewds/vue-component-helpers";
const x = /* @__PURE__ */ m({
  __name: "VueEl",
  props: {
    tag: {
      type: String,
      required: !0,
      validator: (e) => s.includes(e)
    },
    text: {
      type: String,
      default: ""
    }
  },
  setup(e) {
    function l(t) {
      return y(t);
    }
    return (t, f) => l(e.tag) ? (r(), n(o, { key: 0 }, [], 64)) : (r(), i(u(e.tag), { key: 1 }, {
      default: c(() => [
        e.text ? (r(), n(o, { key: 0 }, [
          a(p(e.text), 1)
        ], 64)) : d(t.$slots, "default", { key: 1 }, () => [
          a("VueEl")
        ])
      ]),
      _: 3
    }));
  }
});
export {
  x as VueEl
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

UMD Version

Version used by Node.js (Universal version for Common.js/AMD)

js
(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@obewds/vue-validators"),require("@obewds/vue-component-helpers")):typeof define=="function"&&define.amd?define(["exports","vue","@obewds/vue-validators","@obewds/vue-component-helpers"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.VueEl={},t.Vue,t.VueValidators,t.VueComponentHelpers))})(this,function(t,e,r,i){"use strict";const d=e.defineComponent({__name:"VueEl",props:{tag:{type:String,required:!0,validator:n=>r.elementTags.includes(n)},text:{type:String,default:""}},setup(n){function l(o){return i.isEmptyOrUnsupportedElement(o)}return(o,s)=>l(n.tag)?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[],64)):(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.tag),{key:1},{default:e.withCtx(()=>[n.text?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(n.text),1)],64)):e.renderSlot(o.$slots,"default",{key:1},()=>[e.createTextVNode("VueEl")])]),_:3}))}});t.VueEl=d,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
1

CJS Version

CommonJS version

js
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),o=require("@obewds/vue-validators"),l=require("@obewds/vue-component-helpers"),u=e.defineComponent({__name:"VueEl",props:{tag:{type:String,required:!0,validator:t=>o.elementTags.includes(t)},text:{type:String,default:""}},setup(t){function n(r){return l.isEmptyOrUnsupportedElement(r)}return(r,a)=>n(t.tag)?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[],64)):(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.tag),{key:1},{default:e.withCtx(()=>[t.text?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(t.text),1)],64)):e.renderSlot(r.$slots,"default",{key:1},()=>[e.createTextVNode("VueEl")])]),_:3}))}});exports.VueEl=u;
1

IIFE (Browser) Code

Version used for browser instances

js
var VueEl=function(n,e,l,o){"use strict";const a=e.defineComponent({__name:"VueEl",props:{tag:{type:String,required:!0,validator:t=>l.elementTags.includes(t)},text:{type:String,default:""}},setup(t){function c(r){return o.isEmptyOrUnsupportedElement(r)}return(r,i)=>c(t.tag)?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[],64)):(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.tag),{key:1},{default:e.withCtx(()=>[t.text?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(t.text),1)],64)):e.renderSlot(r.$slots,"default",{key:1},()=>[e.createTextVNode("VueEl")])]),_:3}))}});return n.VueEl=a,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),n}({},Vue,VueValidators,VueComponentHelpers);
1