Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,18 @@ | ||
| import path from 'node:path' | ||
| import { defineConfig } from 'vite' | ||
|
|
||
| // import vue from '@vitejs/plugin-vue' | ||
|
|
||
| // https://vitejs.dev/config/ | ||
| export default defineConfig({ | ||
| // plugins: [vue()], | ||
|
|
||
| resolve: { | ||
| alias: { | ||
| // '@advjs/blender-ui/': `${path.resolve(__dirname, '../../packages/blender-ui')}/`, | ||
| // '@advjs/blender-ui': path.resolve(__dirname, '../../packages/blender-ui/index.ts'), | ||
| '@advjs/blender-ui/': `${path.resolve(__dirname, '../../packages/blender-ui')}/`, | ||
| '@advjs/blender-ui': path.resolve(__dirname, '../../packages/blender-ui/dist/blender-ui.js'), | ||
| }, | ||
| }, | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| { | ||
| "compilerOptions": { | ||
| "paths": { | ||
| "@advjs/blender-ui": ["../packages/blender-ui/index.ts"] | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| { | ||
| "extends": "../tsconfig.base.json", | ||
| "compilerOptions": { | ||
| "target": "ES2020", | ||
| "jsx": "preserve", | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,8 @@ | ||
| import { defineSetupVue3 } from '@histoire/plugin-vue' | ||
| import './packages/blender-ui/client/styles/index.scss' | ||
| import './packages/blender-ui/dist/icons.css' | ||
| import './histoire/styles/index.css' | ||
|
|
||
| export const setupVue3 = defineSetupVue3((_handler) => { | ||
| // addWrapper(GlobalWrapper) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| <script setup> | ||
| import { onBeforeUnmount, onMounted, ref, watch } from 'vue' | ||
| import Toggle from './IconButton.vue' | ||
| const props = defineProps({ | ||
| indent: Number, | ||
| title: String, | ||
| expanded: { type: Boolean, default: undefined }, | ||
| active: Boolean, | ||
| selectable: Boolean, | ||
| parentUnselectable: { type: Boolean, default: undefined }, | ||
| visible: { type: Boolean, default: undefined }, | ||
| match: { type: Boolean, default: undefined }, | ||
| muted: Boolean, | ||
| }) | ||
| const emit = defineEmits(['activate', 'collapse', 'expand', 'log', 'unselectable', 'selectable', 'hide', 'show']) | ||
| const el = ref(null) | ||
| watch(() => props.active, (newActive) => { | ||
| if (newActive && el.value) { | ||
| // Focus or scroll into view logic goes here | ||
| } | ||
| }) | ||
| onMounted(() => { | ||
| // Assign outlineRow or any other initialization logic | ||
| }) | ||
| function activate() { | ||
| emit('activate') | ||
| } | ||
| function collapse() { | ||
| emit('collapse') | ||
| } | ||
| function expand() { | ||
| emit('expand') | ||
| } | ||
| function log() { | ||
| emit('log') | ||
| } | ||
| function unselectable() { | ||
| emit('unselectable') | ||
| } | ||
| function selectable() { | ||
| emit('selectable') | ||
| } | ||
| function hide() { | ||
| emit('hide') | ||
| } | ||
| function show() { | ||
| emit('show') | ||
| } | ||
| function onKeyDown(event) { | ||
| // The keyboard navigation logic goes here | ||
| // You'll need to handle focus and sibling element traversal in Vue 3 terms | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div | ||
| ref="el" class="outliner-row" | ||
| :class="[{ active, muted, match }]" | ||
| :style="{ '--indent': `${indent}px` }" | ||
| tabindex="0" | ||
| @click="activate" | ||
| @dblclick="log" | ||
| @keydown="onKeyDown" | ||
| > | ||
| <template v-if="typeof expanded === 'boolean'"> | ||
| <Toggle | ||
| :icon="expanded ? 'expanded' : 'collapsed'" | ||
| @click="expanded ? collapse() : expand()" | ||
| /> | ||
| </template> | ||
| <template v-else> | ||
| <span class="toggle-spacer" /> | ||
| </template> | ||
| <span class="title">{{ title }}</span> | ||
| <template v-if="selectable"> | ||
| <Toggle | ||
| icon="selectable" | ||
| hint="Disable right-click selection" | ||
| :muted="parentUnselectable" | ||
| @click="unselectable" | ||
| /> | ||
| </template> | ||
| <template v-else> | ||
| <Toggle | ||
| icon="unselectable" | ||
| hint="Enable right-click selection" | ||
| :muted="parentUnselectable" | ||
| @click="selectable" | ||
| /> | ||
| </template> | ||
| <template v-if="typeof visible === 'boolean'"> | ||
| <Toggle | ||
| :icon="visible ? 'eye-opened' : 'eye-closed'" | ||
| :hint="visible ? 'Hide (h)' : 'Show (h)'" | ||
| @click="visible ? hide() : show()" | ||
| /> | ||
| </template> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style lang="scss"> | ||
| .outliner-row { | ||
| display: flex; | ||
| align-items: center; | ||
| background: #282828; | ||
| color: #c2c2c2; | ||
| height: 20px; | ||
| padding-left: calc(var(--indent) * 20px); | ||
| outline: none; | ||
| padding-right: 4px; | ||
| &:nth-child(even) { | ||
| background-color: #2b2b2b; | ||
| } | ||
| &:focus { | ||
| background-color: #334d80; | ||
| } | ||
| &.match { | ||
| background-color: #2f552f; | ||
| &:focus { | ||
| background-color: #336659; | ||
| } | ||
| } | ||
| &.active { | ||
| color: #ffaf29; | ||
| } | ||
| } | ||
| .toggle-spacer { | ||
| width: 20px; | ||
| } | ||
| .title { | ||
| flex: 1; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| user-select: none; | ||
| position: default; | ||
| .muted & { | ||
| opacity: 0.5; | ||
| } | ||
| } | ||
| </style> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import fs from 'node:fs' | ||
| import path from 'node:path' | ||
| import { Buffer } from 'node:buffer' | ||
| import { svg } from '../client/styles/icons' | ||
|
|
||
| const __dirname = path.dirname(new URL(import.meta.url).pathname) | ||
| const distFolder = path.resolve(__dirname, '../dist') | ||
|
|
||
| function bCssVarsRootStyle() { | ||
| const cssVars = Object.keys(svg) | ||
| .map(key => | ||
| `--b-icon-${key}: url("data:image/svg+xml;utf8,${encodeURIComponent(svg[key as keyof typeof svg])}")`, | ||
| ) | ||
| .join(';\n') | ||
|
|
||
| return `:root { ${cssVars} }` | ||
| } | ||
|
|
||
| fs.writeFileSync( | ||
| path.resolve(distFolder, 'icons.css') | ||
| , bCssVarsRootStyle(), | ||
| 'utf-8', | ||
| ) | ||