120 | {(this.$slots as any).default()[0]}
121 |
122 | )
123 | }
124 |
125 | if (renderAlertElement) {
126 | return renderAlertElement
127 | } else {
128 | return renderOnlyAlertElement
129 | }
130 | // return (
131 | //
132 | // {renderAlertElement}
133 | //
134 | // )
135 | // return renderOnlyAlertElement
136 | }
137 | })
138 |
139 | export default SBAlert
140 |
--------------------------------------------------------------------------------
/src/components/alert/SBAlertExample.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
161 | {renderChildElements}
162 |
163 | )
164 | } else {
165 | renderButtonGroup = (
166 |
167 | {renderChildElements}
168 |
169 | )
170 | }
171 |
172 | // return (
173 | //
174 | //
195 | // )
196 | return renderButtonGroup
197 | }
198 | })
199 |
200 | export default SBButtonGroup
201 |
--------------------------------------------------------------------------------
/src/components/buttonGroup/exmaple.tsx:
--------------------------------------------------------------------------------
1 | import { defineComponent } from 'vue'
2 | import SBButtonGroup from './SBButtonGroup'
3 | import SBButton from '../button/SBButton'
4 |
5 | const Exmaple = defineComponent({
6 | name: 'Exmaple',
7 | render() {
8 | return (
9 | My version
175 | // {renderButtonGroup} 176 | 177 | //Real
178 | 179 | //
180 | //
181 | //
182 |
183 | //
193 |
194 | //
184 | //
187 | //
191 | //
192 | //
179 | {(this as any).$slots.default()}
180 |
181 | )
182 |
183 | // Header and footer element
184 | } else if (this.header) {
185 | renderNestedChildrenElement = (
186 |
187 |
192 | )
193 |
194 | // For overlay or not
195 | } else {
196 | renderNestedChildrenElement = (
197 |
200 | )
201 | }
202 |
203 | }
204 |
205 | if (this.imgSrc) {
206 | renderImgElement = (
207 |
188 | {this.header}
189 |
190 | {(this as any).$slots.default()}
191 |
213 | {renderImgElement}
214 | {renderNestedChildrenElement}
215 |
216 | )
217 | }
218 | })
219 |
220 | export default SBCard
221 |
--------------------------------------------------------------------------------
/src/components/card/SBCardHeader.tsx:
--------------------------------------------------------------------------------
1 | import { defineComponent, PropType } from 'vue'
2 |
3 | interface ISBCardHeaderProps {
4 | imgSrc: string
5 | alt?: string
6 | top?: boolean
7 | bottom?: boolean
8 | start?: boolean
9 | left?: boolean
10 | end?: boolean
11 | right?: boolean
12 | height?: string | number
13 | width?: string | number
14 | [key: string]: any
15 | }
16 | type TVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark'
17 |
18 | // TODO: NOT DONE.. NEED MORE WORK ON...
19 |
20 | const SBCardHeader = defineComponent({
21 | name: 'SBCardHeader',
22 | props: {
23 | bgVariant: {
24 | type: String as PropType
70 | // 
73 | //
74 | // )
75 |
76 | return MY VERISON
71 | //REAL
72 | //Card title
77 | } 78 | }) 79 | 80 | export default SBCardHeader 81 | -------------------------------------------------------------------------------- /src/components/card/SBCardImg.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent, PropType } from 'vue' 2 | 3 | interface ISBCardImgProps { 4 | imgSrc: string 5 | alt?: string 6 | top?: boolean 7 | bottom?: boolean 8 | start?: boolean 9 | left?: boolean 10 | end?: boolean 11 | right?: boolean 12 | height?: string | number 13 | width?: string | number 14 | [key: string]: any 15 | } 16 | 17 | // TODO: NOT DONE.. NEED MORE WORK ON... 18 | const SBCardImg = defineComponent({ 19 | name: 'SBCardImg', 20 | props: { 21 | imgSrc: { 22 | type: String, 23 | required: true 24 | }, 25 | alt: { 26 | type: String, 27 | required: false 28 | }, 29 | top: { 30 | type: Boolean, 31 | required: false 32 | }, 33 | bottom: { 34 | type: Boolean, 35 | required: false 36 | }, 37 | start: { 38 | type: Boolean, 39 | required: false 40 | }, 41 | left: { 42 | type: Boolean, 43 | required: false 44 | }, 45 | end: { 46 | type: Boolean, 47 | required: false 48 | }, 49 | right: { 50 | type: Boolean, 51 | required: false 52 | }, 53 | height: { 54 | type: String || Number, 55 | required: false 56 | }, 57 | width: { 58 | type: String || Number, 59 | required: false 60 | }, 61 | class: { 62 | type: String, 63 | required: false 64 | }, 65 | style: { 66 | type: String, 67 | required: false 68 | } 69 | }, 70 | render() { 71 | let computeClass = (props: ISBCardImgProps) => { 72 | let cardImgPost = 'card-img-top' 73 | for (let key in props) { 74 | if (props[key] === true) { 75 | cardImgPost = `card-img-${key}` 76 | } 77 | } 78 | return [cardImgPost] 79 | } 80 | let computeStyle = (props: ISBCardImgProps) => { 81 | console.log('props', props) 82 | return '' 83 | } 84 | 85 | // return ( 86 | //
87 | //
90 | //
91 | // )
92 |
93 | return MY VERISON
88 | //REAL
89 | //{(this as any).$slots.default()[0]}
23 | ) 24 | } 25 | } 26 | 27 | return renderElement 28 | } 29 | }) 30 | 31 | export default SBCardTitle 32 | -------------------------------------------------------------------------------- /src/components/card/SBListgroup.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue' 2 | 3 | const SBListgroup = defineComponent({ 4 | name: 'SBListgroup', 5 | props: { 6 | flush: { 7 | type: Boolean, 8 | required: false 9 | } 10 | }, 11 | render() { 12 | let renderElement: JSX.Element | null = null 13 | 14 | if ((this as any).$slots.default) { 15 | renderElement = (this as any).$slots.default() 16 | } 17 | 18 | return ( 19 |-
20 | {renderElement}
21 |
166 |
169 |
176 |
201 |
202 | )
203 | } else {
204 | console.log('{(this.$slots as any).default()[0]}', (this.$slots as any).default())
205 | renderDropdownElement = (
206 |
207 |
215 |
216 |
217 | )
218 | }
219 | // if ((this.$slots as any).default) {
220 | // //
225 | // {(this.$slots as any).default()}
226 | //
227 | // )
228 | // } else {
229 | // renderDropdownElement = (
230 | //
231 | //
232 | // {this.label ? `${this.label}%` : null}
233 | //
234 | //
235 | // )
236 | // }
237 |
238 | return (
239 |
240 |
293 | )
294 | }
295 | })
296 |
297 | export default SBDropdowns
298 |
--------------------------------------------------------------------------------
/src/components/dropDown/SBDropdownItem.tsx:
--------------------------------------------------------------------------------
1 | import { defineComponent, PropType } from 'vue'
2 |
3 | interface ISBDropdownItemProps {
4 | href?: string
5 | rel?: string
6 | target?: string
7 | active?: boolean
8 | disabled?: boolean
9 | to?: string | object
10 | append?: boolean
11 | replace?: boolean
12 | activeClass?: string
13 | exact?: boolean
14 | exactActiveClass?: string
15 | style?: string
16 | id?: string
17 | linkClasses?: string
18 | class?: string
19 | }
20 |
21 | // TODO: Need to more work on link or vue-router. Not sure about it. Or just element only
22 | const SBDropdownItem = defineComponent({
23 | name: 'SBDropdownItem',
24 | props: {
25 | href: {
26 | type: String,
27 | required: false,
28 | default: ''
29 | },
30 | rel: {
31 | type: String,
32 | require: false
33 | },
34 | target: {
35 | type: String,
36 | required: false
37 | },
38 | active: {
39 | type: Boolean,
40 | required: false
41 | },
42 | disabled: {
43 | type: Boolean,
44 | required: false
45 | },
46 | to: {
47 | type: String || Object,
48 | required: false
49 | },
50 | append: {
51 | type: Boolean,
52 | required: false
53 | },
54 | replace: {
55 | type: Boolean,
56 | required: false
57 | },
58 | activeClass: {
59 | type: String,
60 | required: false
61 | },
62 | exact: {
63 | type: Boolean,
64 | required: false
65 | },
66 | exactActiveClass: {
67 | type: String,
68 | required: false
69 | },
70 | style: {
71 | type: String,
72 | required: false
73 | },
74 | id: {
75 | type: String,
76 | required: false
77 | },
78 | size: {
79 | type: String as PropType<'sm' | 'md' | 'lg'>,
80 | required: false
81 | },
82 | linkClasses: {
83 | type: String,
84 | required: false
85 | },
86 | class: {
87 | type: String,
88 | required: false
89 | }
90 | },
91 | // methods: {
92 | // handleRouteTo(event: Event, urlPath: string) {
93 | // console.log('enter',event, urlPath, )
94 | // console.log(this.href)
95 | // // this.$router.push({
96 | // // path: this.href
97 | // // })
98 | // // this.$router.push(this.href)
99 | // }
100 | // },
101 | setup(props) {
102 | // route.push({})
103 | function handleRouteTo(event: Event, urlPath: string) {
104 | event.preventDefault()
105 | // window.location.assign(props.href)
106 | // event.preventDefault()
107 | // console.log(route)
108 | // console.log(router)
109 |
110 | // router.push(props.href)
111 | // console.log(this.href)
112 | // this.$router.push({
113 | // path: this.href
114 | // })
115 | // this.$router.push(this.href)
116 | }
117 |
118 | return {
119 | handleRouteTo
120 | }
121 | },
122 | render() {
123 | let renderNavItem = null
124 | let computeClass = (props: ISBDropdownItemProps) => {
125 | return ['dropdown-item', props.active ? 'active' : null, props.class]
126 | }
127 |
128 | if ((this.$slots as any).default()) {
129 | renderNavItem = (
130 | My
241 | {/* {renderDropdownSplitElement} */} 242 | {renderDropdownElement} 243 | {/*
244 |
247 |
252 |
*/}
253 |
254 | Example
255 |
256 |
259 |
266 |
291 |
292 |
86 |
99 | )
100 |
101 | // return (
102 | // MY VERISON
87 |REAL
88 | 89 |
90 |
98 |
91 | {/* 
*/}
92 | Bootstrap
93 | 11 mins ago
94 |
95 |
96 | Hello, world! This is a toast message.
97 |
86 |
99 | )
100 |
101 | // return (
102 | // MY VERISON
87 |REAL
88 | 89 |
90 |
98 |
91 | {/* */}
92 | Bootstrap
93 | 11 mins ago
94 |
95 |
96 | Hello, world! This is a toast message.
97 |
152 |
173 | )
174 | } else {
175 | return (
176 | MY VERISON
153 | 166 |REAL
167 | 168 | 171 | 172 |
177 |
203 | )
204 | }
205 |
206 | // return (
207 | // MY VERISON
178 | 188 |REALs
189 | 190 |
191 |
192 | @
193 |
194 |
201 |
202 |
109 |
118 |
121 |
122 | )
123 | } else {
124 | return (
125 |
126 |
135 |
139 |
140 | )
141 | }
142 |
143 | // let renderOptionItems = this.options.map((value: TOptionsItem) => {
144 | // console.log({value})
145 |
146 | // // option groups
147 | // if (value.options) {
148 | // let renderNestOptionItem = value.options.map((value2: TOptionsItem) => {
149 | // return
150 | // })
151 |
152 | // return (
153 | //
168 | // {/*
174 | // )
175 | }
176 | })
177 |
178 | export default SBFormRadios
179 |
--------------------------------------------------------------------------------
/src/components/form/SBFormRadiosGroup.tsx:
--------------------------------------------------------------------------------
1 | import { defineComponent, Fragment, PropType } from 'vue'
2 | import SBFormRadios from './SBFormRadios'
3 |
4 | interface ISBFormRadiosGroupProps {
5 | modelValue?: string
6 | required?: boolean
7 | form?: string
8 | autofocus?: boolean
9 | options?: {} | []
10 | checked?: any
11 | validated?: boolean
12 | stacked?: boolean
13 | buttons?: boolean
14 | value?: string | number
15 | class?: string
16 | style?: string
17 | name?: string
18 | id?: string
19 | disabled?: boolean
20 | size?: string
21 | label?: string
22 | }
23 |
24 | type TOptionsItem = {
25 | value?: string
26 | text?: string
27 | disabled?: boolean
28 | label?: string
29 | options: TOptionsItem[]
30 | }
31 |
32 | const emitsType = {
33 | updateModelValue: 'update:modelValue'
34 | }
35 |
36 | const SBFormRadiosGroup = defineComponent({
37 | name: 'SBFormRadiosGroup',
38 | props: {
39 | options: {
40 | type: Array as PropTypeMY VERISON
*/} 169 | // 170 | // 173 | //
137 |
170 | )
171 | }
172 | })
173 |
174 | export default SBFormRadiosGroup
175 |
--------------------------------------------------------------------------------
/src/components/form/SBFormSelect.tsx:
--------------------------------------------------------------------------------
1 | import { defineComponent, Fragment, PropType } from 'vue'
2 |
3 | interface ISBFormSelectProps {
4 | options: TOptionsItem[]
5 | modelValue?: string
6 | type?: string
7 | class?: string
8 | style?: string
9 | min?: string | number
10 | max?: string | number
11 | step?: string | number
12 | id?: string
13 | disabled?: boolean
14 | size?: string
15 | }
16 |
17 | type TOptionsItem = {
18 | value?: any
19 | text?: string
20 | disabled?: boolean
21 | label?: string
22 | options?: TOptionsItem[]
23 | }
24 |
25 | const emitsType = {
26 | updateModelValue: 'update:modelValue'
27 | }
28 |
29 | const SBFormSelect = defineComponent({
30 | name: 'SBFormSelect',
31 | props: {
32 | options: {
33 | type: Array as PropTypeMY VERISON
138 |
139 |
140 | {renderRadiosItems}
141 | {/*
142 | */}
145 |
146 |
147 | {/*
148 |
149 |
152 |
*/}
153 | {/* Selected: {this.value}
*/}
154 |
155 | REAL
156 | 157 | {/*
158 |
159 |
162 |
163 |
164 |
165 |
168 |
*/}
169 |
3 | App .vue in sbvue
4 |
5 |
6 |
11 |
12 |
13 |
51 |
--------------------------------------------------------------------------------
/src/components/layoutAndGridSystem/SBCol.tsx:
--------------------------------------------------------------------------------
1 | import { defineComponent, PropType } from 'vue'
2 |
3 | interface ISBColProps {
4 | cols?: string
5 | widths?: string
6 | sm?: boolean
7 | md?: boolean
8 | lg?: boolean
9 | xl?: boolean
10 | alignSelf?: string
11 | order?: string
12 | orderSmall?: string
13 | orderMiddle?: string
14 | orderLarge?: string
15 | offset?: string
16 | offsetSmall?: string
17 | offsetMiddle?: string
18 | offsetLarge?: string
19 | class?: string
20 | style?: string
21 | [key: string]: any
22 | }
23 |
24 | const SBCol = defineComponent({
25 | name: 'SBCol',
26 | props: {
27 | cols: {
28 | type: String as PropType<'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12'>,
29 | required: false
30 | },
31 | widths: {
32 | type: String as PropType<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>,
33 | required: false
34 | },
35 | sm: {
36 | type: Boolean,
37 | required: false
38 | },
39 | md: {
40 | type: Boolean,
41 | required: false
42 | },
43 | lg: {
44 | type: Boolean,
45 | required: false
46 | },
47 | xl: {
48 | type: Boolean,
49 | required: false
50 | },
51 | /** horizontal alignment */
52 | alignSelf: {
53 | type: String as PropType<'start' | 'center' | 'end' | 'baseline' | 'stretch'>,
54 | required: false
55 | },
56 | order: {
57 | type: String as PropType<'0' | '1' | '2' | '3' | '4' | '5' | 'first' | 'last'>,
58 | required: false
59 | },
60 | orderSmall: {
61 | type: String as PropType<'0' | '1' | '2' | '3' | '4' | '5' | 'first' | 'last'>,
62 | required: false
63 | },
64 | orderMiddle: {
65 | type: String as PropType<'0' | '1' | '2' | '3' | '4' | '5' | 'first' | 'last'>,
66 | required: false
67 | },
68 | orderLarge: {
69 | type: String as PropType<'0' | '1' | '2' | '3' | '4' | '5' | 'first' | 'last'>,
70 | required: false
71 | },
72 | offset: {
73 | type: String as PropType<'0' | '1' | '2' | '3' | '4' | '5' | 'first' | 'last'>,
74 | required: false
75 | },
76 | offsetSmall: {
77 | type: String as PropType<'0' | '1' | '2' | '3' | '4' | '5' | 'first' | 'last'>,
78 | required: false
79 | },
80 | offsetMiddle: {
81 | type: String as PropType<'0' | '1' | '2' | '3' | '4' | '5' | 'first' | 'last'>,
82 | required: false
83 | },
84 | offsetLarge: {
85 | type: String as PropType<'0' | '1' | '2' | '3' | '4' | '5' | 'first' | 'last'>,
86 | required: false
87 | },
88 | class: {
89 | type: String,
90 | required: false
91 | },
92 | style: {
93 | type: String,
94 | required: false
95 | }
96 | },
97 | render() {
98 | let computeClass = (props: ISBColProps) => {
99 | let containerTypeClass = ''
100 | let alignSelfTypeClass = ''
101 | let orderTypeClass = ''
102 | let offsetTypeClass = ''
103 | if (this.cols) {
104 | containerTypeClass = `col-${this.cols}`
105 | } else if (this.sm) {
106 | containerTypeClass = 'col-sm'
107 | } else if (this.md) {
108 | containerTypeClass = 'col-md'
109 | } else if (this.lg) {
110 | containerTypeClass = 'col-lg'
111 | } else if (this.xl) {
112 | containerTypeClass = 'col-xl'
113 | } else {
114 | containerTypeClass = 'col'
115 | }
116 | if (this.alignSelf) {
117 | alignSelfTypeClass = `align-self-${this.alignSelf}`
118 | }
119 | if (this.order) {
120 | orderTypeClass = `order-${this.order}`
121 | } else if (this.orderSmall) {
122 | orderTypeClass = `order-sm-${this.orderSmall}`
123 | } else if (this.orderMiddle) {
124 | orderTypeClass = `order-md-${this.orderMiddle}`
125 | } else if (this.orderLarge) {
126 | orderTypeClass = `order-lg-${this.orderLarge}`
127 | }
128 | if (this.offset) {
129 | offsetTypeClass = `offset-${this.offset}`
130 | } else if (this.offsetSmall) {
131 | offsetTypeClass = `offset-sm-${this.offsetSmall}`
132 | } else if (this.offsetMiddle) {
133 | offsetTypeClass = `offset-md-${this.offsetMiddle}`
134 | } else if (this.offsetLarge) {
135 | offsetTypeClass = `offset-lg-${this.offsetLarge}`
136 | }
137 | return [containerTypeClass, props.class, alignSelfTypeClass, orderTypeClass, offsetTypeClass]
138 | }
139 |
140 | let computeStyle = (props: ISBColProps) => {
141 | // console.log('props', props)
142 | return ''
143 | }
144 | let renderContainer = null
145 |
146 | if (this.$slots.default) {
147 | console.log(this.$slots.default())
148 | renderContainer = (
149 |
8 | Selected: {{ state.selected }}
9 |
10 |
150 | {this.$slots.default()}
151 |
152 | )
153 | }
154 |
155 | return renderContainer
156 | }
157 | })
158 |
159 | export default SBCol
160 |
--------------------------------------------------------------------------------
/src/components/layoutAndGridSystem/SBContainer.tsx:
--------------------------------------------------------------------------------
1 | import { defineComponent, PropType } from 'vue'
2 |
3 | interface ISBContainerProps {
4 | fluid?: boolean
5 | widths?: string
6 | tag?: string
7 | class?: string
8 | style?: string
9 | [key: string]: any
10 | }
11 |
12 | const SBContainer = defineComponent({
13 | name: 'SBContainer',
14 | props: {
15 | fluid: {
16 | type: Boolean,
17 | required: false
18 | },
19 | widths: {
20 | type: String as PropType<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>,
21 | required: false
22 | },
23 | tag: {
24 | type: String,
25 | required: false
26 | },
27 | class: {
28 | type: String,
29 | required: false
30 | },
31 | style: {
32 | type: String,
33 | required: false
34 | }
35 | },
36 | render() {
37 | let computeClass = (props: ISBContainerProps) => {
38 | let containerType = ''
39 | if (this.widths) {
40 | containerType = `container-${this.widths}`
41 | } else if (this.fluid) {
42 | containerType = 'container-fluid'
43 | } else {
44 | containerType = 'container'
45 | }
46 | return [containerType, props.class]
47 | }
48 |
49 | let computeStyle = (props: ISBContainerProps) => {
50 | console.log('props', props)
51 | return ''
52 | }
53 | let renderContainer = null
54 |
55 | if (this.$slots.default) {
56 | console.log(this.$slots.default())
57 | renderContainer = (
58 |
59 | {this.$slots.default()}
60 |
61 | )
62 | }
63 |
64 | return renderContainer
65 | }
66 | })
67 |
68 | export default SBContainer
69 |
--------------------------------------------------------------------------------
/src/components/layoutAndGridSystem/SBRow.tsx:
--------------------------------------------------------------------------------
1 | import { defineComponent, PropType } from 'vue'
2 |
3 | interface ISBRowProps {
4 | fluid?: boolean
5 | widths?: string
6 | align?: string
7 | justify?: string
8 | tag?: string
9 | class?: string
10 | style?: string
11 | [key: string]: any
12 | }
13 |
14 | const SBRow = defineComponent({
15 | name: 'SBRow',
16 | props: {
17 | fluid: {
18 | type: Boolean,
19 | required: false
20 | },
21 | widths: {
22 | type: String as PropType<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>,
23 | required: false
24 | },
25 | align: {
26 | type: String as PropType<'start' | 'center' | 'end' | 'baseline' | 'stretch'>,
27 | required: false
28 | },
29 | justify: {
30 | type: String as PropType<'start' | 'center' | 'end' | 'baseline' | 'around' | 'between' | 'evenly'>,
31 | required: false
32 | },
33 | tag: {
34 | type: String,
35 | required: false
36 | },
37 | class: {
38 | type: String,
39 | required: false
40 | },
41 | style: {
42 | type: String,
43 | required: false
44 | }
45 | },
46 | render() {
47 | let computeClass = (props: ISBRowProps) => {
48 | let containerType = ''
49 | let alignType = ''
50 | let justifyType = ''
51 | if (this.widths) {
52 | containerType = `container-${this.widths}`
53 | } else if (this.fluid) {
54 | containerType = 'container-fluid'
55 | } else {
56 | containerType = 'row'
57 | }
58 | if (this.align) {
59 | alignType = `align-items-${this.align}`
60 | }
61 | if (this.justify) {
62 | justifyType = `justify-content-${this.justify}`
63 | }
64 | return [containerType, props.class, alignType, justifyType]
65 | }
66 | let renderContainer = null
67 |
68 | if (this.$slots.default) {
69 | console.log(this.$slots.default())
70 | renderContainer = (
71 |
72 | {this.$slots.default()}
73 |
74 | )
75 | }
76 |
77 | return renderContainer
78 | }
79 | })
80 |
81 | export default SBRow
82 |
--------------------------------------------------------------------------------
/src/components/nav/SBNav.tsx:
--------------------------------------------------------------------------------
1 | import { defineComponent, Fragment, PropType } from 'vue'
2 | import SBNavLink from './SBNavLink'
3 |
4 | interface ISBNavProps {
5 | // options: TOptionsItem[],
6 | fill?: boolean
7 | justified?: boolean
8 | align?: string
9 | tabs?: boolean
10 | pills?: boolean
11 | vertical?: boolean
12 | class?: string
13 | style?: string
14 | id?: string
15 | size?: string
16 | }
17 |
18 | type TOptionsItem = {
19 | value?: string
20 | text?: string
21 | disabled?: boolean
22 | label?: string
23 | options: TOptionsItem[]
24 | }
25 |
26 | const emitsType = {
27 | updateModelValue: 'update:modelValue'
28 | }
29 |
30 | const SBNav = defineComponent({
31 | name: 'SBNav',
32 | props: {
33 | fill: {
34 | type: Boolean,
35 | required: false
36 | },
37 | justified: {
38 | type: Boolean,
39 | require: false
40 | },
41 | align: {
42 | type: String,
43 | required: false
44 | },
45 | tabs: {
46 | type: Boolean,
47 | required: false
48 | },
49 | pills: {
50 | type: Boolean,
51 | required: false
52 | },
53 | vertical: {
54 | type: Boolean,
55 | required: false
56 | },
57 | class: {
58 | type: String,
59 | required: false
60 | },
61 | style: {
62 | type: String,
63 | required: false
64 | },
65 | id: {
66 | type: String,
67 | required: false
68 | },
69 | size: {
70 | type: String as PropType<'sm' | 'md' | 'lg'>,
71 | required: false
72 | }
73 | },
74 | emits: {
75 | [emitsType.updateModelValue]: function (payload: string) {
76 | if (typeof payload === 'string') {
77 | return true
78 | } else {
79 | console.warn('Invalid submit event payload!')
80 | return false
81 | }
82 | }
83 | },
84 | methods: {
85 | handleEmitValue(event: Event) {
86 | let result: any = (event.target as HTMLInputElement).value
87 | this.$emit(emitsType.updateModelValue, result)
88 | }
89 | },
90 | render() {
91 | let renderNav = null
92 | let computeClass = (props: ISBNavProps) => {
93 | return ['nav', props.vertical ? 'flex-column' : null, props.class]
94 | }
95 |
96 | if ((this.$slots as any).default()) {
97 | renderNav = - {(this.$slots as any).default()}
{renderNav}
101 | }
102 | })
103 |
104 | export default SBNav
105 |
--------------------------------------------------------------------------------
/src/components/nav/SBNavLink.tsx:
--------------------------------------------------------------------------------
1 | import { defineComponent, PropType } from 'vue'
2 |
3 | interface ISBNavLinkProps {
4 | href?: string
5 | rel?: string
6 | target?: string
7 | active?: boolean
8 | disabled?: boolean
9 | to?: string | object
10 | append?: boolean
11 | replace?: boolean
12 | activeClass?: string
13 | exact?: boolean
14 | exactActiveClass?: string
15 | style?: string
16 | id?: string
17 | linkClasses?: string
18 | class?: string
19 | }
20 |
21 | const SBNavLink = defineComponent({
22 | name: 'SBNavLink',
23 | props: {
24 | href: {
25 | type: String,
26 | required: false,
27 | default: ''
28 | },
29 | rel: {
30 | type: String,
31 | require: false
32 | },
33 | target: {
34 | type: String,
35 | required: false
36 | },
37 | active: {
38 | type: Boolean,
39 | required: false
40 | },
41 | disabled: {
42 | type: Boolean,
43 | required: false
44 | },
45 | to: {
46 | type: String || Object,
47 | required: false
48 | },
49 | append: {
50 | type: Boolean,
51 | required: false
52 | },
53 | replace: {
54 | type: Boolean,
55 | required: false
56 | },
57 | activeClass: {
58 | type: String,
59 | required: false
60 | },
61 | exact: {
62 | type: Boolean,
63 | required: false
64 | },
65 | exactActiveClass: {
66 | type: String,
67 | required: false
68 | },
69 | style: {
70 | type: String,
71 | required: false
72 | },
73 | id: {
74 | type: String,
75 | required: false
76 | },
77 | size: {
78 | type: String as PropType<'sm' | 'md' | 'lg'>,
79 | required: false
80 | },
81 | linkClasses: {
82 | type: String,
83 | required: false
84 | },
85 | class: {
86 | type: String,
87 | required: false
88 | }
89 | },
90 | render() {
91 | let renderNavItem = null
92 | let computeClass = (props: ISBNavLinkProps) => {
93 | return ['nav-link', props.active ? 'active' : null, props.class]
94 | }
95 |
96 | if ((this.$slots as any).default()) {
97 | renderNavItem = (
98 |
127 | {(this.$slots as any).default()}
128 |
129 | )
130 | } else {
131 | renderProgressElement = (
132 |
133 |
134 | {this.label ? `${this.label}%` : null}
135 |
136 |
137 | )
138 | }
139 | return renderProgressElement
140 | }
141 | })
142 |
143 | export default SBProgress
144 |
--------------------------------------------------------------------------------
/src/components/progress/SBProgressBar.tsx:
--------------------------------------------------------------------------------
1 | import { defineComponent, PropType, reactive } from 'vue'
2 |
3 | interface SBProgressBarProps {
4 | striped?: boolean
5 | animated?: boolean
6 | precision?: boolean
7 | showProgress?: boolean
8 | showValue?: boolean
9 | variant?: string
10 | class?: string
11 | max?: string | number
12 | value?: string | number
13 | label?: string | number
14 | }
15 |
16 | type TVariant =
17 | | 'primary'
18 | | 'secondary'
19 | | 'success'
20 | | 'danger'
21 | | 'warning'
22 | | 'info'
23 | | 'light'
24 | | 'dark'
25 | | 'outline-primary'
26 | | 'outline-secondary'
27 | | 'outline-success'
28 | | 'outline-danger'
29 | | 'outline-warning'
30 | | 'outline-info'
31 | | 'outline-light'
32 | | 'outline-dark'
33 | | 'link'
34 |
35 | const SBProgressBar = defineComponent({
36 | name: 'SBProgressBar',
37 | props: {
38 | striped: {
39 | type: Boolean,
40 | required: false
41 | },
42 | animated: {
43 | type: Boolean,
44 | required: false
45 | },
46 | precision: {
47 | type: Boolean,
48 | required: false
49 | },
50 | showProgress: {
51 | type: Boolean,
52 | required: false
53 | },
54 | showValue: {
55 | type: Boolean,
56 | required: false
57 | },
58 | variant: {
59 | type: String as PropType
118 | // // {(this.$slots as any).default()[0]}
119 | // //
120 | // // )
121 | // }
122 |
123 | // // return (
124 | // //
125 | // // {renderAlertElement}
126 | // //
127 | // // )
128 |
129 | return (
130 |
137 | {this.label ? `${this.label}%` : null}
138 |
139 | )
140 | }
141 | })
142 |
143 | export default SBProgressBar
144 |
--------------------------------------------------------------------------------
/src/components/progress/example.vue:
--------------------------------------------------------------------------------
1 |
2 |
73 | // {renderLabel}
74 | //
75 | // )
76 | // } else {
77 | // console.log(' (this.$slots as any).default()[0].children', (this.$slots as any).default()[0].children)
78 | // return (
79 | //
80 | // {renderSlot}
81 | //
82 | // )
83 | // }
84 | return (
85 |
86 | {this.$props.label ? this.$props.label : 'Loading...'}
87 |
88 | )
89 | }
90 | })
91 |
92 | export default SBSpinners
93 |
--------------------------------------------------------------------------------
/src/components/table/SBTable.tsx:
--------------------------------------------------------------------------------
1 | import { defineComponent, Fragment, PropType } from 'vue'
2 |
3 | import './table.css'
4 |
5 | interface ISBTable {
6 | fields: string[]
7 | items?: TItems[]
8 | striped?: boolean
9 | hover?: boolean
10 | class?: string,
11 | perPage?: string | number,
12 | currentPage?: string | number,
13 | dark?: boolean
14 | }
15 |
16 | type TVariant =
17 | | 'primary'
18 | | 'secondary'
19 | | 'success'
20 | | 'danger'
21 | | 'warning'
22 | | 'info'
23 | | 'light'
24 | | 'dark'
25 | | 'outline-primary'
26 | | 'outline-secondary'
27 | | 'outline-success'
28 | | 'outline-danger'
29 | | 'outline-warning'
30 | | 'outline-info'
31 | | 'outline-light'
32 | | 'outline-dark'
33 | | 'link'
34 |
35 | type TItems = {
36 | isActive?: boolean
37 | rowVariant?: string
38 | cellVariant?: {
39 | [key: string]: string
40 | }
41 | [key: string]: any
42 | }
43 |
44 | type TFields = {
45 | key?: string
46 | sortable?: boolean
47 | }[]
48 |
49 | type Partial
348 |
349 |
350 |
354 |
355 | )
356 | }
357 | })
358 |
359 | export default SBTable
360 |
--------------------------------------------------------------------------------
/src/components/table/example.vue:
--------------------------------------------------------------------------------
1 |
2 |
87 |
100 | )
101 |
102 | // return (
103 | // MY VERISON
88 |REAL
89 | 90 |
91 |
99 |
92 | {/* */}
93 | Bootstrap
94 | 11 mins ago
95 |
96 |
97 | Hello, world! This is a toast message.
98 |