@obewds/vue-tw-el Component

Vue Component Code

Pure Vue.js version

vue

<script setup lang="ts">

	import { computed, inject } from 'vue'
    import { getBgPaletteColor, getBorderPaletteColor, getTextPaletteColor } from '@obewds/vue-component-helpers'
    import { ObewdsTwConfig } from '@obewds/obewds-tw-config'
    import { VueEl } from '@obewds/vue-el'

    const props = withDefaults(
        defineProps<{
            bgPalette?: string
            bgColor?: string
            borderPalette?: string
            borderColor?: string
            tag: string
            text?: string
            textPalette?: string
            textColor?: string
        }>(), {
            bgPalette: 'default',
            bgColor: 'default',
            borderPalette: 'default',
            borderColor: '',
            textPalette: 'default',
            textColor: 'default',
        }
    )

    const tw = Object.keys( inject( 'tw', {} ) ).length > 0 ? inject<typeof ObewdsTwConfig>('tw') : ObewdsTwConfig

    let colorClasses = computed( () => {

        let output: string[] = []

        output.push( getBgPaletteColor( tw, props.bgPalette, props.bgColor ) )

        output.push( getBorderPaletteColor( tw, props.borderPalette, props.borderColor ) )

        output.push( getTextPaletteColor( tw, props.textPalette, props.textColor ) )

        return output.join(' ')
        
    })

</script>


<template>

    <VueEl
        :tag="tag"
        :text="text"
        :class="colorClasses"
    >
        <slot/>
    </VueEl>

</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

ES Module Version

ESM version

import { defineComponent as d, inject as r, computed as s, openBlock as f, createBlock as n, unref as a, normalizeClass as c, withCtx as g, renderSlot as C } from "vue";
import { getBgPaletteColor as m, getBorderPaletteColor as p, getTextPaletteColor as i } from "@obewds/vue-component-helpers";
import { ObewdsTwConfig as x } from "@obewds/obewds-tw-config";
import { VueEl as b } from "@obewds/vue-el";
const j = /* @__PURE__ */ d({
  __name: "VueTwEl",
  props: {
    bgPalette: { default: "default" },
    bgColor: { default: "default" },
    borderPalette: { default: "default" },
    borderColor: { default: "" },
    tag: null,
    text: null,
    textPalette: { default: "default" },
    textColor: { default: "default" }
  },
  setup(l) {
    const t = l, o = Object.keys(r("tw", {})).length > 0 ? r("tw") : x;
    let u = s(() => {
      let e = [];
      return e.push(m(o, t.bgPalette, t.bgColor)), e.push(p(o, t.borderPalette, t.borderColor)), e.push(i(o, t.textPalette, t.textColor)), e.join(" ");
    });
    return (e, P) => (f(), n(a(b), {
      tag: l.tag,
      text: l.text,
      class: c(a(u))
    }, {
      default: g(() => [
        C(e.$slots, "default")
      ]),
      _: 3
    }, 8, ["tag", "text", "class"]));
  }
});
export {
  j as VueTwEl
};

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

UMD Version

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

(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@obewds/vue-component-helpers"),require("@obewds/obewds-tw-config"),require("@obewds/vue-el")):typeof define=="function"&&define.amd?define(["exports","vue","@obewds/vue-component-helpers","@obewds/obewds-tw-config","@obewds/vue-el"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.VueTwEl={},t.Vue,t.VueComponentHelpers,t.ObewdsTwConfig,t.VueEl))})(this,function(t,e,r,n,s){"use strict";const a=e.defineComponent({__name:"VueTwEl",props:{bgPalette:{default:"default"},bgColor:{default:"default"},borderPalette:{default:"default"},borderColor:{default:""},tag:null,text:null,textPalette:{default:"default"},textColor:{default:"default"}},setup(u){const o=u,d=Object.keys(e.inject("tw",{})).length>0?e.inject("tw"):n.ObewdsTwConfig;let f=e.computed(()=>{let l=[];return l.push(r.getBgPaletteColor(d,o.bgPalette,o.bgColor)),l.push(r.getBorderPaletteColor(d,o.borderPalette,o.borderColor)),l.push(r.getTextPaletteColor(d,o.textPalette,o.textColor)),l.join(" ")});return(l,i)=>(e.openBlock(),e.createBlock(e.unref(s.VueEl),{tag:u.tag,text:u.text,class:e.normalizeClass(e.unref(f))},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},8,["tag","text","class"]))}});t.VueTwEl=a,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

CJS Version

CommonJS version

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),u=require("@obewds/vue-component-helpers"),s=require("@obewds/obewds-tw-config"),n=require("@obewds/vue-el"),d=e.defineComponent({__name:"VueTwEl",props:{bgPalette:{default:"default"},bgColor:{default:"default"},borderPalette:{default:"default"},borderColor:{default:""},tag:null,text:null,textPalette:{default:"default"},textColor:{default:"default"}},setup(o){const t=o,r=Object.keys(e.inject("tw",{})).length>0?e.inject("tw"):s.ObewdsTwConfig;let a=e.computed(()=>{let l=[];return l.push(u.getBgPaletteColor(r,t.bgPalette,t.bgColor)),l.push(u.getBorderPaletteColor(r,t.borderPalette,t.borderColor)),l.push(u.getTextPaletteColor(r,t.textPalette,t.textColor)),l.join(" ")});return(l,c)=>(e.openBlock(),e.createBlock(e.unref(n.VueEl),{tag:o.tag,text:o.text,class:e.normalizeClass(e.unref(a))},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},8,["tag","text","class"]))}});exports.VueTwEl=d;

IIFE (Browser) Code

Version used for browser instances

var VueTwEl=function(o,t,a,n,d){"use strict";const s=t.defineComponent({__name:"VueTwEl",props:{bgPalette:{default:"default"},bgColor:{default:"default"},borderPalette:{default:"default"},borderColor:{default:""},tag:null,text:null,textPalette:{default:"default"},textColor:{default:"default"}},setup(r){const e=r,u=Object.keys(t.inject("tw",{})).length>0?t.inject("tw"):n.ObewdsTwConfig;let f=t.computed(()=>{let l=[];return l.push(a.getBgPaletteColor(u,e.bgPalette,e.bgColor)),l.push(a.getBorderPaletteColor(u,e.borderPalette,e.borderColor)),l.push(a.getTextPaletteColor(u,e.textPalette,e.textColor)),l.join(" ")});return(l,c)=>(t.openBlock(),t.createBlock(t.unref(d.VueEl),{tag:r.tag,text:r.text,class:t.normalizeClass(t.unref(f))},{default:t.withCtx(()=>[t.renderSlot(l.$slots,"default")]),_:3},8,["tag","text","class"]))}});return o.VueTwEl=s,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),o}({},Vue,VueComponentHelpers,ObewdsTwConfig,VueEl);

@obewds/vue-tw-el Component #

Vue Component Code #

ES Module Version #

UMD Version #

CJS Version #