@obewds/vue-tw-inline

Appearance

On this page

@obewds/vue-tw-inline Component

Vue Component Code

Pure Vue.js version

vue
<script setup lang="ts">

    import { VueTwEl } from '@obewds/vue-tw-el'
    import { inlineLevelElementTags } from '@obewds/vue-validators'

    const props = defineProps({
        bgPalette: {
            type: String,
            default: 'default',
        },
        bgColor: {
            type: String,
            default: 'default',
        },
        borderPalette: {
            type: String,
            default: 'default',
        },
        borderColor: {
            type: String,
            default: '',
        },
        tag: {
            type: String,
            required: true,
            validator: (prop: string): boolean => (inlineLevelElementTags).includes(prop),
        },
        text: {
            type: String,
            default: '',
        },
        textPalette: {
            type: String,
            default: 'default',
        },
        textColor: {
            type: String,
            default: 'default',
        },
    })

</script>


<template>

    <VueTwEl
        :bgPalette="bgPalette"
        :bgColor="bgColor"
        :borderPalette="borderPalette"
        :borderColor="borderColor"
        :tag="tag"
        :text="text"
        :textPalette="textPalette"
        :textColor="textColor"
    >
        <slot/>
    </VueTwEl>

</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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

ES Module Version

ESM version

js
import { defineComponent as l, openBlock as r, createBlock as o, unref as a, withCtx as d, renderSlot as n } from "vue";
import { VueTwEl as u } from "@obewds/vue-tw-el";
import { inlineLevelElementTags as g } from "@obewds/vue-validators";
const C = /* @__PURE__ */ l({
  __name: "VueTwInline",
  props: {
    bgPalette: {
      type: String,
      default: "default"
    },
    bgColor: {
      type: String,
      default: "default"
    },
    borderPalette: {
      type: String,
      default: "default"
    },
    borderColor: {
      type: String,
      default: ""
    },
    tag: {
      type: String,
      required: !0,
      validator: (t) => g.includes(t)
    },
    text: {
      type: String,
      default: ""
    },
    textPalette: {
      type: String,
      default: "default"
    },
    textColor: {
      type: String,
      default: "default"
    }
  },
  setup(t) {
    return (e, i) => (r(), o(a(u), {
      bgPalette: t.bgPalette,
      bgColor: t.bgColor,
      borderPalette: t.borderPalette,
      borderColor: t.borderColor,
      tag: t.tag,
      text: t.text,
      textPalette: t.textPalette,
      textColor: t.textColor
    }, {
      default: d(() => [
        n(e.$slots, "default")
      ]),
      _: 3
    }, 8, ["bgPalette", "bgColor", "borderPalette", "borderColor", "tag", "text", "textPalette", "textColor"]));
  }
});
export {
  C as VueTwInline
};
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

UMD Version

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

js
(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@obewds/vue-tw-el"),require("@obewds/vue-validators")):typeof define=="function"&&define.amd?define(["exports","vue","@obewds/vue-tw-el","@obewds/vue-validators"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.VueTwInline={},l.Vue,l.VueTwEl,l.VueValidators))})(this,function(l,e,r,o){"use strict";const d=e.defineComponent({__name:"VueTwInline",props:{bgPalette:{type:String,default:"default"},bgColor:{type:String,default:"default"},borderPalette:{type:String,default:"default"},borderColor:{type:String,default:""},tag:{type:String,required:!0,validator:t=>o.inlineLevelElementTags.includes(t)},text:{type:String,default:""},textPalette:{type:String,default:"default"},textColor:{type:String,default:"default"}},setup(t){return(n,u)=>(e.openBlock(),e.createBlock(e.unref(r.VueTwEl),{bgPalette:t.bgPalette,bgColor:t.bgColor,borderPalette:t.borderPalette,borderColor:t.borderColor,tag:t.tag,text:t.text,textPalette:t.textPalette,textColor:t.textColor},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"default")]),_:3},8,["bgPalette","bgColor","borderPalette","borderColor","tag","text","textPalette","textColor"]))}});l.VueTwInline=d,Object.defineProperties(l,{__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 t=require("vue"),r=require("@obewds/vue-tw-el"),o=require("@obewds/vue-validators"),a=t.defineComponent({__name:"VueTwInline",props:{bgPalette:{type:String,default:"default"},bgColor:{type:String,default:"default"},borderPalette:{type:String,default:"default"},borderColor:{type:String,default:""},tag:{type:String,required:!0,validator:e=>o.inlineLevelElementTags.includes(e)},text:{type:String,default:""},textPalette:{type:String,default:"default"},textColor:{type:String,default:"default"}},setup(e){return(l,u)=>(t.openBlock(),t.createBlock(t.unref(r.VueTwEl),{bgPalette:e.bgPalette,bgColor:e.bgColor,borderPalette:e.borderPalette,borderColor:e.borderColor,tag:e.tag,text:e.text,textPalette:e.textPalette,textColor:e.textColor},{default:t.withCtx(()=>[t.renderSlot(l.$slots,"default")]),_:3},8,["bgPalette","bgColor","borderPalette","borderColor","tag","text","textPalette","textColor"]))}});exports.VueTwInline=a;
1

IIFE (Browser) Code

Version used for browser instances

js
var VueTwInline=function(l,t,r,a){"use strict";const o=t.defineComponent({__name:"VueTwInline",props:{bgPalette:{type:String,default:"default"},bgColor:{type:String,default:"default"},borderPalette:{type:String,default:"default"},borderColor:{type:String,default:""},tag:{type:String,required:!0,validator:e=>a.inlineLevelElementTags.includes(e)},text:{type:String,default:""},textPalette:{type:String,default:"default"},textColor:{type:String,default:"default"}},setup(e){return(n,d)=>(t.openBlock(),t.createBlock(t.unref(r.VueTwEl),{bgPalette:e.bgPalette,bgColor:e.bgColor,borderPalette:e.borderPalette,borderColor:e.borderColor,tag:e.tag,text:e.text,textPalette:e.textPalette,textColor:e.textColor},{default:t.withCtx(()=>[t.renderSlot(n.$slots,"default")]),_:3},8,["bgPalette","bgColor","borderPalette","borderColor","tag","text","textPalette","textColor"]))}});return l.VueTwInline=o,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),l}({},Vue,VueTwEl,VueValidators);
1