Merge pull request #532 from VividLemon/main

feat: more booleanish additions

Author: mariusa

.github/workflows/npm-publish.yaml

@@ -39,6 +39,6 @@ jobs:
         run: pnpm test
 
       - name: Publish
-        run: pnpm publish --tag develop --filter bootstrap-vue-3
+        run: pnpm publish --filter bootstrap-vue-3
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.github/workflows/release-please.yaml renamed to .github/workflows/release-dev.yaml

@@ -1,21 +1,16 @@
 # This workflow is for the release please action. It automates releases when using conventional commit messages
-# It also auto publishes releases to npm 
+# It also auto publishes releases to npm under the @develop tag
 # For more information see: https://github.com/google-github-actions/release-please-action
 
-name: release-please
+name: release-dev
 
 on:
   push:
-    paths:
-      - 'packages/bootstrap-vue-3/**'
-      - '.github/workflows/release-please.yaml'
     branches:
-      - main
+      - dev
 
 jobs:
   release-please:
-    env: 
-      path: packages/bootstrap-vue-3
     runs-on: ${{ matrix.os }}
 
     strategy:
@@ -29,45 +24,46 @@ jobs:
         id: release
         with:
           release-type: node
-          path: ${{ env.path }}
+          path: packages/bootstrap-vue-3
           package-name: bootstrap-vue-3
           bump-minor-pre-major: true
           bump-patch-for-minor-pre-major: true
+          default-branch: dev
 
       # The logic below handles the npm publication:
 
       - name: Clone repository
         uses: actions/checkout@v3
         # these if statements ensure that a publication only occurs when
         # a new release is created:
-        if: ${{ contains(steps.release.outputs.paths_released, env.path) }}
+        if: ${{ steps.release.outputs.releases_created }}
 
       - name: Install pnpm
         uses: pnpm/[email protected]
-        if: ${{ contains(steps.release.outputs.paths_released, env.path) }}
+        if: ${{ steps.release.outputs.releases_created }}
 
       - name: Set node version to 16
         uses: actions/setup-node@v2
         with:
           node-version: 16
           cache: 'pnpm'
           registry-url: 'https://registry.npmjs.org'
-        if: ${{ contains(steps.release.outputs.paths_released, env.path) }}
+        if: ${{ steps.release.outputs.releases_created }}
 
       - name: Install dependencies
         run: pnpm install --ignore-scripts
-        if: ${{ contains(steps.release.outputs.paths_released, env.path) }}
+        if: ${{ steps.release.outputs.releases_created }}
 
       - name: Build library
         run: pnpm run build
-        if: ${{ contains(steps.release.outputs.paths_released, env.path) }}
+        if: ${{ steps.release.outputs.releases_created }}
 
       - name: Test library
         run: pnpm test
-        if: ${{ contains(steps.release.outputs.paths_released, env.path) }}
+        if: ${{ steps.release.outputs.releases_created }}
 
       - name: Publish 
         run: pnpm publish --tag develop --filter bootstrap-vue-3
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
-        if: ${{ contains(steps.release.outputs.paths_released, env.path) }}
+        if: ${{ steps.release.outputs.releases_created }}

.github/workflows/release-main.yaml

@@ -0,0 +1,69 @@
+# This workflow is for the release please action. It automates releases when using conventional commit messages
+# It also auto publishes releases to npm under the @latest tag
+# For more information see: https://github.com/google-github-actions/release-please-action
+
+name: release-main
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  release-please:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node-version: [16.x]
+
+    steps:
+      - name: Use release please
+        uses: google-github-actions/release-please-action@v3
+        id: release
+        with:
+          release-type: node
+          path: packages/bootstrap-vue-3
+          package-name: bootstrap-vue-3
+          bump-minor-pre-major: true
+          bump-patch-for-minor-pre-major: true
+          default-branch: main
+          
+      # The logic below handles the npm publication:
+
+      - name: Clone repository
+        uses: actions/checkout@v3
+        # these if statements ensure that a publication only occurs when
+        # a new release is created:
+        if: ${{ steps.release.outputs.releases_created }}
+        
+      - name: Install pnpm
+        uses: pnpm/[email protected]
+        if: ${{ steps.release.outputs.releases_created }}
+        
+      - name: Set node version to 16
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+          cache: 'pnpm'
+          registry-url: 'https://registry.npmjs.org'
+        if: ${{ steps.release.outputs.releases_created }}
+
+      - name: Install dependencies
+        run: pnpm install --ignore-scripts
+        if: ${{ steps.release.outputs.releases_created }}
+
+      - name: Build library
+        run: pnpm run build
+        if: ${{ steps.release.outputs.releases_created }}
+
+      - name: Test library
+        run: pnpm test
+        if: ${{ steps.release.outputs.releases_created }}
+
+      - name: Publish 
+        run: pnpm publish --tag latest --filter bootstrap-vue-3
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+        if: ${{ steps.release.outputs.releases_created }}

README.md

@@ -44,13 +44,13 @@ As you may suppose, this library is heavily inspired by **BootstrapVue**, as wel
 
 ```console
 # NPM
-npm i --save bootstrap bootstrap-vue-3
+npm i --save bootstrap bootstrap-vue-3 @popperjs/core
 
 # Yarn
-yarn add bootstrap bootstrap-vue-3
+yarn add bootstrap bootstrap-vue-3 @popperjs/core
 
 # PNPM
-pnpm add bootstrap bootstrap-vue-3
+pnpm add bootstrap bootstrap-vue-3 @popperjs/core
 ```
 
 # Contribute & support 🙌

apps/docs/docs/getting-started/README.md

@@ -48,23 +48,23 @@ To install this library you can use Yarn or NPM:
   <CodeGroupItem title="YARN" active>
 
 ```bash
-yarn add bootstrap bootstrap-vue-3
+yarn add bootstrap bootstrap-vue-3 @popperjs/core
 ```
 
   </CodeGroupItem>
 
   <CodeGroupItem title="NPM">
 
 ```bash
-npm install bootstrap bootstrap-vue-3
+npm install bootstrap bootstrap-vue-3 @popperjs/core
 ```
 
   </CodeGroupItem>
 
   <CodeGroupItem title="PNPM">
 
 ```bash
-pnpm add bootstrap bootstrap-vue-3
+pnpm add bootstrap bootstrap-vue-3 @popperjs/core
 ```
 
   </CodeGroupItem>
@@ -98,23 +98,23 @@ In your Nuxt3 application, install `bootstrap-vue-3`
   <CodeGroupItem title="YARN" active>
 
 ```bash
-yarn add bootstrap bootstrap-vue-3
+yarn add bootstrap bootstrap-vue-3 @popperjs/core
 ```
 
   </CodeGroupItem>
 
   <CodeGroupItem title="NPM">
 
 ```bash
-npm install bootstrap bootstrap-vue-3
+npm install bootstrap bootstrap-vue-3 @popperjs/core
 ```
 
   </CodeGroupItem>
 
   <CodeGroupItem title="PNPM">
 
 ```bash
-pnpm add bootstrap bootstrap-vue-3
+pnpm add bootstrap bootstrap-vue-3 @popperjs/core
 ```
 
   </CodeGroupItem>

packages/bootstrap-vue-3/package.json

@@ -34,6 +34,7 @@
   },
   "peerDependencies": {
     "bootstrap": "5.x.x",
+    "@popperjs/core": "^2.x.x",
     "vue": "3.x.x"
   },
   "devDependencies": {
@@ -44,15 +45,15 @@
     "@vue/shared": "^3.2.37",
     "@vue/test-utils": "^2.0.0-rc.18",
     "bootstrap": "5.x.x",
-    "jsdom": "^19.0.0",
+    "jsdom": "^20.0.0",
     "rollup": "^2.76.0",
     "rollup-plugin-visualizer": "5.x.x",
     "sass": "1.x.x",
     "tsconfig": "workspace:*",
     "typescript": "4.x.x",
     "vite": "2.x.x",
     "vite-plugin-dts": "1.x.x",
-    "vitest": "^0.10.4",
+    "vitest": "^0.20.3",
     "vue": "3.x.x",
     "vue-router": "4.x.x",
     "vue-tsc": "^0.37.2"

packages/bootstrap-vue-3/src/components/BAccordion/BAccordion.vue

@@ -25,14 +25,15 @@ const props = withDefaults(defineProps<BAccordionProps>(), {
 })
 
 const computedId = useId(props.id, 'accordion')
-const booleanFlush = computed(() => resolveBooleanish(props.flush))
-const booleanFree = computed(() => resolveBooleanish(props.free))
+
+const flushBoolean = computed<boolean>(() => resolveBooleanish(props.flush))
+const freeBoolean = computed<boolean>(() => resolveBooleanish(props.free))
 
 const classes = computed(() => ({
-  'accordion-flush': booleanFlush.value,
+  'accordion-flush': flushBoolean.value,
 }))
 
-if (!booleanFree.value) {
+if (!freeBoolean.value) {
   provide(injectionKey, computedId.value.toString())
 }
 </script>

packages/bootstrap-vue-3/src/components/BAccordion/BAccordionItem.vue

@@ -4,9 +4,9 @@
       <button
         v-b-toggle:[computedId]
         class="accordion-button"
-        :class="{collapsed: !visible}"
+        :class="{collapsed: !visibleBoolean}"
         type="button"
-        :aria-expanded="visible ? 'true' : 'false'"
+        :aria-expanded="visibleBoolean ? 'true' : 'false'"
         :aria-controls="computedId"
       >
         <slot name="title">
@@ -17,7 +17,7 @@
     <b-collapse
       :id="computedId"
       class="accordion-collapse"
-      :visible="booleanVisible"
+      :visible="visibleBoolean"
       :accordion="parent"
       :aria-labelledby="`heading${computedId}`"
     >
@@ -46,7 +46,7 @@ interface BAccordionItemProps {
 
 const props = withDefaults(defineProps<BAccordionItemProps>(), {visible: false})
 
-const booleanVisible = computed(() => resolveBooleanish(props.visible))
+const visibleBoolean = computed<boolean>(() => resolveBooleanish(props.visible))
 
 const computedId = useId(props.id, 'accordion_item')
 const parent = inject(injectionKey, '')

packages/bootstrap-vue-3/src/components/BAvatar/BAvatar.vue

@@ -69,11 +69,11 @@ const props = withDefaults(defineProps<BAvatarProps>(), {
   variant: 'secondary',
 })
 
-const booleanBadgeLeft = computed(() => resolveBooleanish(props.badgeLeft))
-const booleanBadgeTop = computed(() => resolveBooleanish(props.badgeTop))
-const booleanButton = computed(() => resolveBooleanish(props.button))
-const booleanDisabled = computed(() => resolveBooleanish(props.disabled))
-const booleanSquare = computed(() => resolveBooleanish(props.square))
+const badgeLeftBoolean = computed<boolean>(() => resolveBooleanish(props.badgeLeft))
+const badgeTopBoolean = computed<boolean>(() => resolveBooleanish(props.badgeTop))
+const buttonBoolean = computed<boolean>(() => resolveBooleanish(props.button))
+const disabledBoolean = computed<boolean>(() => resolveBooleanish(props.disabled))
+const squareBoolean = computed<boolean>(() => resolveBooleanish(props.square))
 
 interface BAvatarEmits {
   (e: 'click', value: MouseEvent): void
@@ -118,7 +118,7 @@ const computedRounded = computed<string | boolean>(() =>
 
 const attrs = computed(() => ({
   'aria-label': props.ariaLabel || null,
-  'disabled': booleanDisabled.value || null,
+  'disabled': disabledBoolean.value || null,
 }))
 
 const badgeClasses = computed(() => ({
@@ -134,18 +134,18 @@ const badgeTextClasses = computed<string>(() => {
 const classes = computed(() => ({
   [`b-avatar-${props.size}`]: props.size && SIZES.indexOf(computeSize(props.size)) !== -1,
   [`bg-${computedVariant.value}`]: computedVariant.value,
-  [`badge`]: !booleanButton.value && computedVariant.value && hasDefaultSlot.value,
+  [`badge`]: !buttonBoolean.value && computedVariant.value && hasDefaultSlot.value,
   rounded: computedRounded.value === '' || computedRounded.value === true,
-  [`rounded-circle`]: !booleanSquare.value && computedRounded.value === 'circle',
-  [`rounded-0`]: booleanSquare.value || computedRounded.value === '0',
-  [`rounded-1`]: !booleanSquare.value && computedRounded.value === 'sm',
-  [`rounded-3`]: !booleanSquare.value && computedRounded.value === 'lg',
-  [`rounded-top`]: !booleanSquare.value && computedRounded.value === 'top',
-  [`rounded-bottom`]: !booleanSquare.value && computedRounded.value === 'bottom',
-  [`rounded-start`]: !booleanSquare.value && computedRounded.value === 'left',
-  [`rounded-end`]: !booleanSquare.value && computedRounded.value === 'right',
-  btn: booleanButton.value,
-  [`btn-${computedVariant.value}`]: booleanButton.value ? computedVariant.value : null,
+  [`rounded-circle`]: !squareBoolean.value && computedRounded.value === 'circle',
+  [`rounded-0`]: squareBoolean.value || computedRounded.value === '0',
+  [`rounded-1`]: !squareBoolean.value && computedRounded.value === 'sm',
+  [`rounded-3`]: !squareBoolean.value && computedRounded.value === 'lg',
+  [`rounded-top`]: !squareBoolean.value && computedRounded.value === 'top',
+  [`rounded-bottom`]: !squareBoolean.value && computedRounded.value === 'bottom',
+  [`rounded-start`]: !squareBoolean.value && computedRounded.value === 'left',
+  [`rounded-end`]: !squareBoolean.value && computedRounded.value === 'right',
+  btn: buttonBoolean.value,
+  [`btn-${computedVariant.value}`]: buttonBoolean.value ? computedVariant.value : null,
 }))
 
 const textClasses = computed<string>(() => {
@@ -161,10 +161,10 @@ const badgeStyle = computed<StyleValue>(() => {
       : ''
   return {
     fontSize: fontSize || '',
-    top: booleanBadgeTop.value ? offset : '',
-    bottom: booleanBadgeTop.value ? '' : offset,
-    left: booleanBadgeLeft.value ? offset : '',
-    right: booleanBadgeLeft.value ? '' : offset,
+    top: badgeTopBoolean.value ? offset : '',
+    bottom: badgeTopBoolean.value ? '' : offset,
+    left: badgeLeftBoolean.value ? offset : '',
+    right: badgeLeftBoolean.value ? '' : offset,
   }
 })
 
@@ -184,15 +184,15 @@ const marginStyle = computed(() => {
   return value ? {marginLeft: value, marginRight: value} : {}
 })
 
-const tag = computed<string>(() => (booleanButton.value ? props.buttonType : 'span'))
+const tag = computed<string>(() => (buttonBoolean.value ? props.buttonType : 'span'))
 const tagStyle = computed(() => ({
   ...marginStyle.value,
   width: computedSize.value,
   height: computedSize.value,
 }))
 
 const clicked = (e: MouseEvent): void => {
-  if (!booleanDisabled.value && booleanButton.value) emit('click', e)
+  if (!disabledBoolean.value && buttonBoolean.value) emit('click', e)
 }
 const onImgError = (e: Event): void => emit('img-error', e)
 </script>