New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
agnostic-vue
Advanced tools
agnostic-vue - npm Package Compare versions
Comparing version 1.0.1-12 to 1.0.2
151
package.json
| { | ||
| "name": "agnostic-vue", | ||
| "version": "1.0.1-12", | ||
| "version": "1.0.2", | ||
| "description": "AgnosticUI (Vue)", | ||
@@ -23,6 +23,5 @@ "author": "Rob Levin <roblevinillustration@gmail.com>", | ||
| ], | ||
| "main": "dist/agnostic-vue.ssr.js", | ||
| "browser": "dist/agnostic-vue.esm.js", | ||
| "module": "dist/agnostic-vue.esm.js", | ||
| "unpkg": "dist/agnostic-vue.min.js", | ||
| "main": "./dist/agnosticvue.umd.js", | ||
| "browser": "./dist/agnosticvue.es.js", | ||
| "module": "./dist/agnosticvue.es.js", | ||
| "files": [ | ||
@@ -34,130 +33,32 @@ "src/**/*.{css,js,jsx,vue,ts,tsx}", | ||
| "scripts": { | ||
| "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src", | ||
| "cp:css": "cp ./src/css/common.min.css ./dist/common.min.css", | ||
| "prebuild": "rimraf ./dist", | ||
| "prepublish": "npm run build", | ||
| "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js && yarn cp:css", | ||
| "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs", | ||
| "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es", | ||
| "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife", | ||
| "serve": "yarn sync:verify && vue-cli-service serve dev/serve.js", | ||
| "sync:verify": "yarn syncStyles && yarn lint && yarn format", | ||
| "syncStyles": "node copystyles.js", | ||
| "test": "jest", | ||
| "css:check": "yarn run prettier --check src/**/*.*css", | ||
| "format": "yarn run prettier --write src/**/*.*css", | ||
| "lint": "vue-cli-service lint", | ||
| "prelint": "yarn format", | ||
| "pretest": "yarn lint", | ||
| "start": "yarn serve", | ||
| "storybook": "yarn sync:verify && start-storybook -p 6006", | ||
| "build-storybook": "yarn sync:verify && build-storybook --docs -o docs" | ||
| "dev": "vite --port 3011", | ||
| "build": "vite build && yarn cp:css", | ||
| "serve": "vite preview", | ||
| "storybook": "yarn syncStyles && start-storybook -p 6006", | ||
| "build-storybook": "yarn syncStyles && build-storybook --docs -o docs" | ||
| }, | ||
| "dependencies": {}, | ||
| "devDependencies": { | ||
| "@babel/core": "^7.14.6", | ||
| "@babel/preset-env": "^7.14.7", | ||
| "@rollup/plugin-alias": "^3.1.2", | ||
| "@rollup/plugin-babel": "^5.3.0", | ||
| "@rollup/plugin-commonjs": "^14.0.0", | ||
| "@rollup/plugin-node-resolve": "^9.0.0", | ||
| "@rollup/plugin-replace": "^2.4.2", | ||
| "@storybook/addon-a11y": "^6.3.8", | ||
| "@storybook/addon-actions": "^6.0.19", | ||
| "@storybook/addon-essentials": "^6.0.19", | ||
| "@storybook/addon-links": "^6.0.19", | ||
| "@storybook/addon-storyshots": "^6.0.20", | ||
| "@storybook/vue": "^6.0.19", | ||
| "@testing-library/jest-dom": "^5.11.4", | ||
| "@testing-library/vue": "^5.0.4", | ||
| "@vue/cli-plugin-babel": "^4.5.13", | ||
| "@vue/cli-plugin-eslint": "^4.5.13", | ||
| "@vue/cli-service": "^4.5.13", | ||
| "babel-eslint": "^10.1.0", | ||
| "babel-jest": "^26.3.0", | ||
| "babel-loader": "^8.1.0", | ||
| "cross-env": "^7.0.3", | ||
| "css-loader": "^4.2.2", | ||
| "eslint": "^6.7.2", | ||
| "eslint-plugin-vue": "^6.2.2", | ||
| "identity-obj-proxy": "^3.0.0", | ||
| "jest": "^26.4.2", | ||
| "minimist": "^1.2.5", | ||
| "postcss": "^8.3.8", | ||
| "prettier": "^2.2.1", | ||
| "react-is": "^16.13.1", | ||
| "rimraf": "^3.0.2", | ||
| "rollup": "^2.52.8", | ||
| "rollup-plugin-postcss": "^4.0.1", | ||
| "rollup-plugin-terser": "^7.0.2", | ||
| "rollup-plugin-vue": "^5.1.9", | ||
| "typescript": "^4.0.2", | ||
| "vue": "^2.6.14", | ||
| "vue-jest": "^3.0.6", | ||
| "vue-loader": "^15.9.3", | ||
| "vue-style-loader": "^4.1.2", | ||
| "vue-svg-loader": "^0.17.0-beta.2", | ||
| "vue-template-compiler": "^2.6.14", | ||
| "vue-test-utils": "^1.0.0-beta.11", | ||
| "vue-uuid": "^2.0.2", | ||
| "webpack": "^4.44.1", | ||
| "webpack-cli": "^3.3.12" | ||
| "dependencies": { | ||
| "vue": "^3.2.22" | ||
| }, | ||
| "peerDependencies": { | ||
| "vue": "^2.6.14", | ||
| "vue-uuid": "^2.0.2" | ||
| }, | ||
| "engines": { | ||
| "node": ">=12" | ||
| }, | ||
| "eslintConfig": { | ||
| "root": true, | ||
| "env": { | ||
| "node": true | ||
| }, | ||
| "extends": [ | ||
| "plugin:vue/essential", | ||
| "eslint:recommended" | ||
| ], | ||
| "parserOptions": { | ||
| "parser": "babel-eslint" | ||
| }, | ||
| "overrides": [ | ||
| { | ||
| "files": [ | ||
| "**/*.spec.js", | ||
| "**/*.test.js" | ||
| ], | ||
| "env": { | ||
| "jest": true | ||
| } | ||
| } | ||
| ], | ||
| "rules": {} | ||
| }, | ||
| "jest": { | ||
| "moduleNameMapper": { | ||
| "^vue$": "vue/dist/vue.common.js", | ||
| "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js", | ||
| "\\.(css|less)$": "identity-obj-proxy" | ||
| }, | ||
| "moduleFileExtensions": [ | ||
| "vue", | ||
| "js", | ||
| "jsx", | ||
| "json", | ||
| "node" | ||
| ], | ||
| "transform": { | ||
| "^.+\\.js$": "babel-jest", | ||
| "^.+\\.vue$": "vue-jest" | ||
| }, | ||
| "transformIgnorePatterns": [ | ||
| "/node_modules/(?!(@storybook/.*\\.vue$))" | ||
| ], | ||
| "testPathIgnorePatterns": [ | ||
| "/node_modules/", | ||
| "/build/", | ||
| "/storybook-static/" | ||
| ] | ||
| "devDependencies": { | ||
| "@babel/core": "^7.16.0", | ||
| "@storybook/addon-a11y": "^6.3.12", | ||
| "@storybook/addon-actions": "^6.3.12", | ||
| "@storybook/addon-essentials": "^6.3.12", | ||
| "@storybook/addon-links": "^6.3.12", | ||
| "@storybook/vue3": "^6.3.12", | ||
| "@vitejs/plugin-vue": "^1.9.3", | ||
| "babel-loader": "^8.2.3", | ||
| "eslint": "^8.2.0", | ||
| "eslint-plugin-vue": "^8.1.1", | ||
| "vite": "^2.6.4", | ||
| "vue-loader": "^16.8.3", | ||
| "vue-uuid": "^2.0.2" | ||
| } | ||
| } |
@@ -1,57 +0,7 @@ | ||
| # AgnosticUI Vue | ||
| # Vue 3 + Vite | ||
| This is the [Vue version](https://github.com/AgnosticUI/agnosticui/tree/master/agnostic-vue) of [AgnosticUI](https://github.com/AgnosticUI/agnosticui). | ||
| This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. | ||
| ## Project setup | ||
| ## Recommended IDE Setup | ||
| Install dependencies | ||
| ``` | ||
| yarn | ||
| ``` | ||
| ### Storybook | ||
| ``` | ||
| yarn storybook | ||
| ``` | ||
| ### Build | ||
| ``` | ||
| yarn build | ||
| ``` | ||
| You can also verify components in `./examples` with `yarn serve` | ||
| ### Docs | ||
| A statically compiled version of the Storybook build can be ran with: | ||
| ``` | ||
| open ./docs/index.html | ||
| ``` | ||
| ## Build Notes | ||
| The rollup configuration and development workflow leveraged [vue-sfc-rollup](https://www.npmjs.com/package/vue-sfc-rollup) to get started (before some renaming and additional postcss config), and was inspired by this article: | ||
| https://dev.to/htech/creating-a-vue-module-with-rollup-and-typescript-4igb | ||
| ## Requirements | ||
| _NOTE: The following may not be relevant unless you're somehow importing the components directly. Need to verify._ | ||
| Using agnostic-Vue requires opting in to CSS Modules in your project. However, please note that we've opted to use kabob case like `header-nav` so if you set your vue.config.js or webpack.config.js to only allow camel case you'll break AgnosticUI: | ||
| ```js | ||
| loaderOptions: { | ||
| css: { | ||
| // Note: the following config format is different between Vue CLI v4 and v3 | ||
| // For Vue CLI v3 users, please refer to css-loader v1 documentations | ||
| // https://github.com/webpack-contrib/css-loader/tree/v1.0.1 | ||
| modules: { | ||
| localIdentName: '[name]-[hash]' | ||
| }, | ||
| // DO NOT ADD THIS LINE | ||
| // localsConvention: 'camelCaseOnly' | ||
| } | ||
| ``` | ||
| - [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) |
@@ -1,4 +0,4 @@ | ||
| import Button from './Button.vue'; | ||
| import ButtonsDisabled from './ButtonsDisabledTests.vue'; | ||
| import ButtonTests from './ButtonTests.vue'; | ||
| import Button from '../components/Button.vue'; | ||
| import ButtonsDisabled from '../components/ButtonsDisabledTests.vue'; | ||
| import ButtonTests from '../components/ButtonTests.vue'; | ||
@@ -28,3 +28,5 @@ export default { | ||
| <Button :isBordered="true">Go</Button> | ||
| <Button isBlank>Go</Button> | ||
| <Button isBlank>Blank</Button> | ||
| <Button isLink>Link</Button> | ||
| <Button isLink :isSkinned="false">Link unskinned</Button> | ||
| <Button isBlock>Go</Button> | ||
@@ -31,0 +33,0 @@ <Button isRounded>Go</Button> |
@@ -1,3 +0,3 @@ | ||
| import ButtonGroup from "./ButtonGroup.vue"; | ||
| import ButtonGroupTests from "./ButtonGroupTests.vue"; | ||
| import ButtonGroup from "../components/ButtonGroup.vue"; | ||
| import ButtonGroupTests from "../components/ButtonGroupTests.vue"; | ||
@@ -4,0 +4,0 @@ export default { |
@@ -1,2 +0,2 @@ | ||
| import ButtonIconTests from './ButtonIconTests'; | ||
| import ButtonIconTests from '../components/ButtonIconTests'; | ||
@@ -3,0 +3,0 @@ export default { |
@@ -1,2 +0,2 @@ | ||
| import AgnosticCard from "./Card.vue"; | ||
| import AgnosticCard from "../components/Card.vue"; | ||
@@ -3,0 +3,0 @@ export default { |
@@ -1,2 +0,2 @@ | ||
| import AgChoiceInput from "./ChoiceInput.vue"; | ||
| import AgChoiceInput from "../components/ChoiceInput.vue"; | ||
| import { action } from "@storybook/addon-actions"; | ||
@@ -3,0 +3,0 @@ |
@@ -1,4 +0,4 @@ | ||
| import AgnosticHeader from "./Header.vue"; | ||
| import AgnosticHeaderNav from "./HeaderNav.vue"; | ||
| import AgnosticHeaderNavItem from "./HeaderNavItem.vue"; | ||
| import AgnosticHeader from "../components/Header.vue"; | ||
| import AgnosticHeaderNav from "../components/HeaderNav.vue"; | ||
| import AgnosticHeaderNavItem from "../components/HeaderNavItem.vue"; | ||
@@ -5,0 +5,0 @@ export default { |
@@ -1,3 +0,3 @@ | ||
| import AgInput from "./Input.vue"; | ||
| import InputAddonItem from "./InputAddonItem.vue"; | ||
| import AgInput from "../components/Input.vue"; | ||
| import InputAddonItem from "../components/InputAddonItem.vue"; | ||
| import { action } from "@storybook/addon-actions"; | ||
@@ -4,0 +4,0 @@ |
@@ -1,2 +0,2 @@ | ||
| import AgnosticProgress from './Progress.vue'; | ||
| import AgnosticProgress from '../components/Progress.vue'; | ||
@@ -13,10 +13,12 @@ export default { | ||
| const Template = (args, { argTypes }) => ({ | ||
| props: Object.keys(argTypes), | ||
| const Template = args => ({ | ||
| components: { AgnosticProgress }, | ||
| template: '<agnostic-progress v-bind="$props" />', | ||
| setup() { | ||
| return { args } | ||
| }, | ||
| template: '<agnostic-progress v-bind="args" />', | ||
| }); | ||
| export const ProgressTest = Template.bind({}); | ||
| ProgressTest.args = { | ||
| export const QuarterWay = Template.bind({}); | ||
| QuarterWay.args = { | ||
| value: 25, | ||
@@ -26,4 +28,4 @@ max: 100, | ||
| export const ProgressCss = Template.bind({}); | ||
| ProgressCss.args = { | ||
| export const CustomCss = Template.bind({}); | ||
| CustomCss.args = { | ||
| value: 25, | ||
@@ -30,0 +32,0 @@ max: 100, |
@@ -1,2 +0,2 @@ | ||
| import AgSwitch from "./Switch.vue"; | ||
| import AgSwitch from "../components/Switch.vue"; | ||
| import { action } from "@storybook/addon-actions"; | ||
@@ -3,0 +3,0 @@ |
@@ -1,8 +0,7 @@ | ||
| import AgTabs from "./Tabs.vue"; | ||
| import AgTabPanel from "./TabPanel.vue"; | ||
| import Button from "./Button.vue"; | ||
| import Tabs from "../components/Tabs.vue"; | ||
| import Button from "../components/Button.vue"; | ||
| const wrapper = () => { | ||
| return { | ||
| template: '<div style="padding: 0.5rem;"><story/></div>', | ||
| template: '<div style="padding: 0.5rem;"><story /></div>', | ||
| }; | ||
@@ -14,209 +13,177 @@ }; | ||
| decorators: [wrapper], | ||
| component: AgTabs | ||
| component: Tabs | ||
| }; | ||
| export const TabsDefault = () => ({ | ||
| components: { AgTabs, AgTabPanel }, | ||
| template: ` | ||
| <ag-tabs :tabs="['1', '2']"> | ||
| <template slot="tab-button-1"> | ||
| Tab 1 | ||
| </template> | ||
| <template slot="tab-button-2"> | ||
| Tab 2 | ||
| </template> | ||
| <template slot="tab-panel-1"> | ||
| <ag-tab-panel title="Tab 1"> | ||
| Tab 1 content (no padding or margins so consumer can control desired gutters) (no padding or margins so consumer can control desired gutters) | ||
| </ag-tab-panel> | ||
| </template> | ||
| <template slot="tab-panel-2"> | ||
| <ag-tab-panel title="Tab 2"> | ||
| Tab 2 content (no padding or margins so consumer can control desired gutters) | ||
| </ag-tab-panel> | ||
| </template> | ||
| </ag-tabs> | ||
| ` | ||
| export const Default = () => ({ | ||
| components: { Tabs }, | ||
| template:`<Tabs> | ||
| <template #tab-1>Tab 1</template> | ||
| <template #panel-1>Panel 1</template> | ||
| <template #tab-2>Tab 1</template> | ||
| <template #panel-2>Panel 2</template> | ||
| <template #tab-foo>Tab Foo</template> | ||
| <template #panel-foo>Panel Foo</template> | ||
| <template #tab-bar>Tab Bar</template> | ||
| <template #panel-bar>Panel Bar</template> | ||
| </Tabs>` | ||
| }); | ||
| export const TabsLarge = () => ({ | ||
| components: { AgTabs, AgTabPanel }, | ||
| template: ` | ||
| <ag-tabs size="large" :tabs="['1', '2']"> | ||
| <template slot="tab-button-1"> | ||
| Tab 1 | ||
| </template> | ||
| <template slot="tab-button-2"> | ||
| Tab 2 | ||
| </template> | ||
| <template slot="tab-panel-1"> | ||
| <ag-tab-panel title="Tab 1"> | ||
| Tab 1 content (no padding or margins so consumer can control desired gutters) | ||
| </ag-tab-panel> | ||
| </template> | ||
| <template slot="tab-panel-2"> | ||
| <ag-tab-panel title="Tab 2"> | ||
| Tab 2 content (no padding or margins so consumer can control desired gutters) | ||
| </ag-tab-panel> | ||
| </template> | ||
| </ag-tabs> | ||
| ` | ||
| export const TabsWithMoreContent = () => ({ | ||
| components: { Tabs }, | ||
| template:`<Tabs> | ||
| <template #tab-1>Tab 1</template> | ||
| <template #panel-1> | ||
| <p>Tab 1 content (no padding or margins so consumer can control desired gutters) (no padding or margins so consumer can control desired gutters)</p> | ||
| <p>Try tabbing into this. You'll be able to tab through the links, and then shift-tab back out. To get to the | ||
| next tab you use the arrow key and enter|space to select. This is consistent with | ||
| wai-aria practices <a href="https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html"> | ||
| aria manual activation example</a>.</p> | ||
| <p>Random <a href="www.yahoo.com">yahoo link 1</a> and random <a href="www.yahoo.com">yahoo link 2</a>. Just testing some links out :)</p> | ||
| </template> | ||
| <template #tab-2>Tab 2</template> | ||
| <template #panel-2> | ||
| Tab 2 content (no padding or margins so consumer can control desired gutters) | ||
| </template> | ||
| </Tabs>` | ||
| }); | ||
| export const TabsJumbo = () => ({ | ||
| components: { AgTabs, AgTabPanel }, | ||
| template: ` | ||
| <ag-tabs size="jumbo" :tabs="['1', '2']"> | ||
| <template slot="tab-button-1"> | ||
| Tab 1 | ||
| </template> | ||
| <template slot="tab-button-2"> | ||
| Tab 2 | ||
| </template> | ||
| <template slot="tab-panel-1"> | ||
| <ag-tab-panel title="Tab 1"> | ||
| Tab 1 content (no padding or margins so consumer can control desired gutters) | ||
| </ag-tab-panel> | ||
| </template> | ||
| <template slot="tab-panel-2"> | ||
| <ag-tab-panel title="Tab 2"> | ||
| Tab 2 content (no padding or margins so consumer can control desired gutters) | ||
| </ag-tab-panel> | ||
| </template> | ||
| </ag-tabs> | ||
| ` | ||
| export const Large = () => ({ | ||
| components: { Tabs }, | ||
| template:`<Tabs size="large"> | ||
| <template #tab-1>Tab 1</template> | ||
| <template #panel-1>Panel 1</template> | ||
| <template #tab-2>Tab 1</template> | ||
| <template #panel-2>Panel 2</template> | ||
| </Tabs>` | ||
| }); | ||
| export const TabsAllDisabled = () => ({ | ||
| components: { AgTabs, AgTabPanel }, | ||
| template: ` | ||
| <ag-tabs isDisabled size="jumbo" :tabs="['1', '2']"> | ||
| <template slot="tab-button-1"> | ||
| Tab 1 | ||
| </template> | ||
| <template slot="tab-button-2"> | ||
| Tab 2 | ||
| </template> | ||
| <template slot="tab-panel-1"> | ||
| <ag-tab-panel title="Tab 1"> | ||
| Tab 1 content (no padding or margins so consumer can control desired gutters) | ||
| </ag-tab-panel> | ||
| </template> | ||
| <template slot="tab-panel-2"> | ||
| <ag-tab-panel title="Tab 2"> | ||
| Tab 2 content (no padding or margins so consumer can control desired gutters) | ||
| </ag-tab-panel> | ||
| </template> | ||
| </ag-tabs> | ||
| ` | ||
| export const XLarge = () => ({ | ||
| components: { Tabs }, | ||
| template:`<Tabs size="xlarge"> | ||
| <template #tab-1>Tab 1</template> | ||
| <template #panel-1>Panel 1</template> | ||
| <template #tab-2>Tab 1</template> | ||
| <template #panel-2>Panel 2</template> | ||
| </Tabs>` | ||
| }); | ||
| export const TabsWithDisabledOptions = () => ({ | ||
| components: { AgTabs, AgTabPanel }, | ||
| export const Vertical = () => ({ | ||
| components: { Tabs }, | ||
| template:`<Tabs isVertical> | ||
| <template #tab-1>Tab 1</template> | ||
| <template #panel-1> | ||
| <p>Vertical tab 1 content (no padding or margins so consumer can control desired gutters) (no padding or margins so consumer can control desired gutters)</p> | ||
| <p>Now you'll use the up and down arrows. Home and end still work the same. Random <a href="www.yahoo.com">yahoo link 1</a> and random <a href="www.yahoo.com">yahoo link 2</a>. Just testing some links out :)</p> | ||
| </template> | ||
| <template #tab-2>Tab 2</template> | ||
| <template #panel-2> | ||
| Vertical tab 2 content (no padding or margins so consumer can control desired gutters) | ||
| </template> | ||
| </Tabs>` | ||
| }); | ||
| export const AllDisabled = () => ({ | ||
| components: { Tabs }, | ||
| template:`<Tabs isDisabled> | ||
| <template #tab-1>Tab 1</template> | ||
| <template #panel-1>Panel 1</template> | ||
| <template #tab-2>Tab 1</template> | ||
| <template #panel-2>Panel 2</template> | ||
| </Tabs>` | ||
| }); | ||
| export const DisabledOptions = () => ({ | ||
| components: { Tabs }, | ||
| data() { | ||
| return { | ||
| disabledOptions: ["2", "4"] | ||
| disabledOptions: ['tab-1', 'tab-3'] | ||
| }; | ||
| }, | ||
| template: ` | ||
| <ag-tabs size="jumbo" :tabs="['1', '2', '3', '4']" :disabledOptions="disabledOptions"> | ||
| <template slot="tab-button-1"> | ||
| Tab 1 | ||
| </template> | ||
| <template slot="tab-button-2"> | ||
| Tab 2 | ||
| </template> | ||
| <template slot="tab-button-3"> | ||
| Tab 3 | ||
| </template> | ||
| <template slot="tab-button-4"> | ||
| Tab 4 | ||
| </template> | ||
| <template slot="tab-panel-1"> | ||
| <ag-tab-panel title="Tab 1"> | ||
| Tab 1 content (no padding or margins so consumer can control desired gutters) | ||
| </ag-tab-panel> | ||
| </template> | ||
| <template slot="tab-panel-2"> | ||
| <ag-tab-panel title="Tab 2"> | ||
| Tab 2 content (no padding or margins so consumer can control desired gutters) | ||
| </ag-tab-panel> | ||
| </template> | ||
| <template slot="tab-panel-3"> | ||
| <ag-tab-panel title="Tab 3"> | ||
| Tab 3 content | ||
| </ag-tab-panel> | ||
| </template> | ||
| <template slot="tab-panel-4"> | ||
| <ag-tab-panel title="Tab 4"> | ||
| Tab 4 content | ||
| </ag-tab-panel> | ||
| </template> | ||
| </ag-tabs> | ||
| ` | ||
| template:`<Tabs :disabledOptions="disabledOptions"> | ||
| <template #tab-1>Tab 1</template> | ||
| <template #panel-1>Disabled options only make sense if you do NOT supply isDisabled (as | ||
| that disabled all the tab buttons), and you wish to selectively disable certain buttons. | ||
| Here we've obviously disabled the first and third tab.</template> | ||
| <template #tab-2>Tab 1</template> | ||
| <template #panel-2>Panel 2</template> | ||
| <template #tab-3>Tab 3</template> | ||
| <template #panel-3>Panel 3</template> | ||
| <template #tab-4>Tab 4</template> | ||
| <template #panel-4>Panel 4</template> | ||
| </Tabs>` | ||
| }); | ||
| export const TabsWithButtons = () => ({ | ||
| components: { AgTabs, AgTabPanel, Button }, | ||
| template: ` | ||
| <ag-tabs size="jumbo" :tabs="tabs" tabType="button"> | ||
| <template slot="tab-button-one"> | ||
| export const CustomizedTabs = () => ({ | ||
| components: { Tabs, Button }, | ||
| template:` | ||
| <div> | ||
| <p class="mbe12">Custom tabs using an AgnosticUI button requires two things:</p> | ||
| <ul class="mbe24"> | ||
| <li>You need to use the <code>tabType="custom"</code> prop on the tab</li> | ||
| <li>You need to use the <code>type="faux"</code> prop on the button. This is required because the tabs are already buttons so you'd have a nested button a11y violation otherwise.</li> | ||
| </ul> | ||
| <Tabs tabType="custom"> | ||
| <template #tab-1> | ||
| <Button type="faux" mode="primary" isBordered>Tab One</Button> | ||
| </template> | ||
| <template slot="tab-panel-one"> | ||
| <ag-tab-panel> | ||
| <p>Tab buttons can be achieved by using <i>tabType</i> of button and passing in your | ||
| own AgnosticUI Buttons. Note, it's important to pass the <i>type="faux"</i> prop for the | ||
| AgnosticUI Button you use for the tab buttons! Doing so will result in a <i>div</i> that | ||
| is styled like a button. This is important for a11y compliance since otherwise you'll get | ||
| nested focusable buttons as these get wrapped by buttons internally.</p> | ||
| </ag-tab-panel> | ||
| <template #panel-1> | ||
| <p>Tab 1 content (no padding or margins so consumer can control desired gutters) (no padding or margins so consumer can control desired gutters)</p> | ||
| <p>Try tabbing into this. You'll be able to tab through the links, and then shift-tab back out. To get to the | ||
| next tab you use the arrow key and enter|space to select. This is consistent with | ||
| wai-aria practices <a href="https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html"> | ||
| aria manual activation example</a>.</p> | ||
| <p>Random <a href="www.yahoo.com">yahoo link 1</a> and random <a href="www.yahoo.com">yahoo link 2</a>. Just testing some links out :)</p> | ||
| </template> | ||
| <template slot="tab-button-two"> | ||
| <template #tab-2> | ||
| <Button type="faux" mode="primary" isBordered>Tab Two</Button> | ||
| </template> | ||
| <template slot="tab-panel-two"> | ||
| <ag-tab-panel> | ||
| Note you don't have to use AgnosticUI buttons if you prefer to use your own custom buttons. Just | ||
| remember to build "faux buttons" (only style the element like a button—don't use a button tag) or | ||
| else you'll trigger an a11y violation due to nested buttons. | ||
| </ag-tab-panel> | ||
| <template #panel-2> | ||
| Tab 2 content (no padding or margins so consumer can control desired gutters) | ||
| </template> | ||
| </ag-tabs> | ||
| `, | ||
| data() { | ||
| return { | ||
| tabs: ["one", "two"], | ||
| }; | ||
| }, | ||
| </Tabs> | ||
| </div>` | ||
| }); | ||
| export const TabsWithButtonsSvgs = () => ({ | ||
| components: { AgTabs, AgTabPanel, Button }, | ||
| template: ` | ||
| <ag-tabs size="jumbo" :tabs="tabs" :isBorderless="true" tabType="button"> | ||
| <template slot="tab-button-react"> | ||
| export const CustomSVGTabs = () => ({ | ||
| components: { Tabs, Button }, | ||
| template:` | ||
| <div> | ||
| <p class="mbe12">Custom tabs using an AgnosticUI button requires two things:</p> | ||
| <ul class="mbe24"> | ||
| <li>You need to use the <code>tabType="custom"</code> prop on the tab</li> | ||
| <li>You need to use the <code>type="faux"</code> prop on the button. This is required because the tabs are already buttons so you'd have a nested button a11y violation otherwise.</li> | ||
| </ul> | ||
| <Tabs :isBorderless="true" tabType="custom"> | ||
| <template #tab-react> | ||
| <Button style="padding: 1rem 2rem; height: 100%;" type="faux" isBordered> | ||
| <svg | ||
| width="96" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 841.9 595.3" | ||
| > | ||
| <g fill="#61DAFB"> | ||
| <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z" /> | ||
| <circle | ||
| cx="420.9" | ||
| cy="296.5" | ||
| r="45.7" | ||
| /> | ||
| <path d="M520.5 78.1z" /> | ||
| </g> | ||
| </svg> | ||
| </Button> | ||
| <svg | ||
| width="96" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 841.9 595.3" | ||
| > | ||
| <g fill="#61DAFB"> | ||
| <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z" /> | ||
| <circle | ||
| cx="420.9" | ||
| cy="296.5" | ||
| r="45.7" | ||
| /> | ||
| <path d="M520.5 78.1z" /> | ||
| </g> | ||
| </svg> | ||
| <span class="screenreader-only">React framework tab button trigger</span> | ||
| </Button> | ||
| </template> | ||
| <template slot="tab-panel-react"> | ||
| <ag-tab-panel> | ||
| <template #panel-react> | ||
| <p>React content...</p> | ||
| </ag-tab-panel> | ||
| <p>Random <a href="www.yahoo.com">yahoo link 1</a> and random <a href="www.yahoo.com">yahoo link 2</a>. Just testing some links out :)</p> | ||
| <p>Tab 1 content (no padding or margins so consumer can control desired gutters) (no padding or margins so consumer can control desired gutters)</p> | ||
| <p>Try tabbing into this. You'll be able to tab through the links, and then shift-tab back out. To get to the | ||
| next tab you use the arrow key and enter|space to select. This is consistent with | ||
| wai-aria practices <a href="https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html"> | ||
| aria manual activation example</a>.</p> | ||
| <p>Random <a href="www.yahoo.com">yahoo link 1</a> and random <a href="www.yahoo.com">yahoo link 2</a>. Just testing some links out :)</p> | ||
| </template> | ||
| <template slot="tab-button-vue"> | ||
| <template #tab-vue> | ||
| <Button style="padding: 1.75rem 3.25rem; height: 100%;" type="faux" isBordered> | ||
@@ -237,10 +204,10 @@ <svg | ||
| </svg> | ||
| <span class="screenreader-only">Vue framework tab button trigger</span> | ||
| </Button> | ||
| </template> | ||
| <template slot="tab-panel-vue"> | ||
| <ag-tab-panel> | ||
| <p>Vue content here...</p> | ||
| </ag-tab-panel> | ||
| <template #panel-vue> | ||
| <p>Vue content here...</p> | ||
| <p>Random <a href="www.yahoo.com">yahoo link 1</a> and random <a href="www.yahoo.com">yahoo link 2</a>. Just testing some links out :)</p> | ||
| </template> | ||
| <template slot="tab-button-angular"> | ||
| <template #tab-angular> | ||
| <Button style="padding: 1.75rem 3rem; height: 100%;" type="faux" isBordered> | ||
@@ -264,10 +231,10 @@ <svg | ||
| </svg> | ||
| </Button> | ||
| <span class="screenreader-only">Angular framework tab button trigger</span> | ||
| </Button> | ||
| </template> | ||
| <template slot="tab-panel-angular"> | ||
| <ag-tab-panel> | ||
| <p>Angular content here...</p> | ||
| </ag-tab-panel> | ||
| <template #panel-angular> | ||
| <p>Angular content here...</p> | ||
| <p>Random <a href="www.yahoo.com">yahoo link 1</a> and random <a href="www.yahoo.com">yahoo link 2</a>. Just testing some links out :)</p> | ||
| </template> | ||
| <template slot="tab-button-svelte"> | ||
| <template #tab-svelte> | ||
| <Button style="padding: 1.75rem 3.5rem; height: 100%;" type="faux" isBordered> | ||
@@ -287,46 +254,11 @@ <svg | ||
| </svg> | ||
| <span class="screenreader-only">Svelte framework tab button trigger</span> | ||
| </Button> | ||
| </template> | ||
| <template slot="tab-panel-svelte"> | ||
| <ag-tab-panel> | ||
| <p>Svelte content here...</p> | ||
| </ag-tab-panel> | ||
| <template #panel-svelte> | ||
| <p>Svelte content here...</p> | ||
| <p>Random <a href="www.yahoo.com">yahoo link 1</a> and random <a href="www.yahoo.com">yahoo link 2</a>. Just testing some links out :)</p> | ||
| </template> | ||
| </ag-tabs> | ||
| `, | ||
| data() { | ||
| return { | ||
| tabs: ["react", "vue", "angular", "svelte"] | ||
| }; | ||
| } | ||
| </Tabs> | ||
| </div>` | ||
| }); | ||
| export const TabsWithButtonsCrayCray = () => ({ | ||
| components: { AgTabs, AgTabPanel, Button }, | ||
| template: ` | ||
| <ag-tabs size="jumbo" :tabs="tabs" tabType="button"> | ||
| <template slot="tab-button-one"> | ||
| <Button type="faux" mode="primary" isBordered>Quick start</Button> | ||
| </template> | ||
| <template slot="tab-panel-one"> | ||
| <ag-tab-panel> | ||
| <p>You can use whatever combination of AgnosticUI buttons you wish to. Of course | ||
| there's no guarantee every combination will look good together :-)</p> | ||
| </ag-tab-panel> | ||
| </template> | ||
| <template slot="tab-button-two"> | ||
| <Button type="faux" mode="secondary" isBordered>Common issues</Button> | ||
| </template> | ||
| <template slot="tab-panel-two"> | ||
| <ag-tab-panel> | ||
| Second panel here… | ||
| </ag-tab-panel> | ||
| </template> | ||
| </ag-tabs> | ||
| `, | ||
| data() { | ||
| return { | ||
| tabs: ["one", "two"], | ||
| }; | ||
| }, | ||
| }); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by16.59%
470301
- Dev dependency count
- decreased by-72.34%
13
- Number of package files
- increased by44.44%
65
- Number of low supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Lines of code
- decreased by-18.91%
5095
- Number of low quality alerts
- increased by50%
3
- Number of lines in readme file
- decreased by-86.21%
8
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Addedvue@^3.2.22
+ Added@jridgewell/sourcemap-codec@1.5.0(transitive)
+ Added@vue/compiler-core@3.5.13(transitive)
+ Added@vue/compiler-dom@3.5.13(transitive)
+ Added@vue/compiler-sfc@3.5.13(transitive)
+ Added@vue/compiler-ssr@3.5.13(transitive)
+ Added@vue/reactivity@3.5.13(transitive)
+ Added@vue/runtime-core@3.5.13(transitive)
+ Added@vue/runtime-dom@3.5.13(transitive)
+ Added@vue/server-renderer@3.5.13(transitive)
+ Added@vue/shared@3.5.13(transitive)
+ Addedentities@4.5.0(transitive)
+ Addedestree-walker@2.0.2(transitive)
+ Addedmagic-string@0.30.17(transitive)
+ Addedvue@3.5.13(transitive)
- Removed@vue/compiler-sfc@2.7.16(transitive)
- Removedprettier@2.8.8(transitive)
- Removedsource-map@0.6.1(transitive)
- Removedvue@2.7.16(transitive)