diff --git a/package-lock.json b/package-lock.json index eb643d4..b54e1f5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3135,7 +3135,6 @@ "version": "0.9.0", "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.9.0.tgz", "integrity": "sha512-E36i7JPrTAhf9ozSRlYEy+hDslHXpotGtU6vUw364QJg7BOP55CMQiGes2ez2q0hvbpxoOZFbvwjnELfPTIjbw==", - "dev": true, "license": "MIT", "peerDependencies": { "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0", @@ -9139,7 +9138,8 @@ "version": "0.3.4", "license": "MIT", "dependencies": { - "@poppy-ui/core": "^0.3.4" + "@poppy-ui/core": "^0.3.4", + "@stencil/vue-output-target": "^0.9.0" }, "devDependencies": { "@biomejs/biome": "^1.9.4", @@ -9148,7 +9148,7 @@ "change-case": "^5.4.4", "rimraf": "^6.0.1", "rollup": "^4.27.3", - "typescript": "^5.6.2", + "typescript": "^5.7.2", "vite": "^5.4.11", "vue": "3.5.11" } diff --git a/packages/core/stencil.config.ts b/packages/core/stencil.config.ts index 45171fc..da8293e 100644 --- a/packages/core/stencil.config.ts +++ b/packages/core/stencil.config.ts @@ -100,11 +100,12 @@ export const config: Config = { includeGlobalScripts: false, }, vueOutputTarget({ - componentCorePackage: componentCorePackage, - proxiesFile: '../vue/src/proxies.ts', includeImportCustomElements: true, - includeDefineCustomElements: false, includePolyfills: false, + includeDefineCustomElements: false, + componentCorePackage: componentCorePackage, + hydrateModule: `${componentCorePackage}/hydrate`, + proxiesFile: '../vue/src/proxies.ts', componentModels: [ { elements: ['pop-checkbox', 'pop-toggle'], diff --git a/packages/vue/package.json b/packages/vue/package.json index 1afffe5..41d9329 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -43,6 +43,10 @@ "build:web-types": "node --experimental-json-modules ./scripts/build-web-types.js", "copy:css": "node ./scripts/copy-css.js" }, + "dependencies": { + "@poppy-ui/core": "^0.3.4", + "@stencil/vue-output-target": "^0.9.0" + }, "devDependencies": { "@biomejs/biome": "^1.9.4", "@poppy-ui/docs": "^0.3.4", @@ -50,7 +54,7 @@ "change-case": "^5.4.4", "rimraf": "^6.0.1", "rollup": "^4.27.3", - "typescript": "^5.6.2", + "typescript": "^5.7.2", "vite": "^5.4.11", "vue": "3.5.11" }, @@ -61,8 +65,5 @@ "web-types": "dist/web-types.json", "sideEffects": [ "css/*.css" - ], - "dependencies": { - "@poppy-ui/core": "^0.3.4" - } + ] } diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 9714e01..ec593d2 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -1,7 +1,7 @@ /* eslint-disable */ /* tslint:disable */ /* auto-generated vue proxies */ -import { defineContainer } from '@stencil/vue-output-target/runtime'; +import { defineContainer, defineStencilSSRComponent } from '@stencil/vue-output-target/runtime'; import type { JSX } from '@poppy-ui/core/components'; @@ -43,15 +43,24 @@ import { defineCustomElement as definePopToggle } from '@poppy-ui/core/component import { defineCustomElement as definePopTooltip } from '@poppy-ui/core/components/pop-tooltip.js'; -export const PopAccordion = /*@__PURE__*/ defineContainer('pop-accordion', definePopAccordion, [ +export const PopAccordion = /*@__PURE__*/ globalThis.window ? defineContainer('pop-accordion', definePopAccordion, [ 'readonly', 'disabled', 'name', 'open' -]); - - -export const PopAccordionGroup = /*@__PURE__*/ defineContainer('pop-accordion-group', definePopAccordionGroup, [ +]) : defineStencilSSRComponent({ + tagName: 'pop-accordion', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'readonly': [Boolean, "readonly"], + 'disabled': [Boolean, "disabled"], + 'name': [String, "name"], + 'open': [Boolean, "open"] + } +}); + + +export const PopAccordionGroup = /*@__PURE__*/ globalThis.window ? defineContainer('pop-accordion-group', definePopAccordionGroup, [ 'readonly', 'disabled', 'multiple', @@ -59,23 +68,49 @@ export const PopAccordionGroup = /*@__PURE__*/ defineContainer('pop-avatar', definePopAvatar, [ +'active', 'pop-change') : defineStencilSSRComponent({ + tagName: 'pop-accordion-group', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'readonly': [Boolean, "readonly"], + 'disabled': [Boolean, "disabled"], + 'multiple': [Boolean, "multiple"], + 'active': [String, "active"], + 'onPopChange': [Function], + 'onPopActiveChange': [Function] + } +}); + + +export const PopAvatar = /*@__PURE__*/ globalThis.window ? defineContainer('pop-avatar', definePopAvatar, [ 'placeholder' -]); +]) : defineStencilSSRComponent({ + tagName: 'pop-avatar', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'placeholder': [Boolean, "placeholder"] + } +}); -export const PopBadge = /*@__PURE__*/ defineContainer('pop-badge', definePopBadge, [ +export const PopBadge = /*@__PURE__*/ globalThis.window ? defineContainer('pop-badge', definePopBadge, [ 'color', 'size', 'outlined', 'as' -]); - - -export const PopButton = /*@__PURE__*/ defineContainer('pop-button', definePopButton, [ +]) : defineStencilSSRComponent({ + tagName: 'pop-badge', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'color': [String, "color"], + 'size': [String, "size"], + 'outlined': [Boolean, "outlined"], + 'as': [String, "as"] + } +}); + + +export const PopButton = /*@__PURE__*/ globalThis.window ? defineContainer('pop-button', definePopButton, [ 'type', 'form', 'disabled', @@ -87,24 +122,64 @@ export const PopButton = /*@__PURE__*/ defineContainer('pop-butto 'active', 'popFocus', 'popBlur' -]); - - -export const PopCard = /*@__PURE__*/ defineContainer('pop-card', definePopCard, [ +]) : defineStencilSSRComponent({ + tagName: 'pop-button', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'type': [String, "type"], + 'form': [String, "form"], + 'disabled': [Boolean, "disabled"], + 'color': [String, "color"], + 'size': [String, "size"], + 'outlined': [Boolean, "outlined"], + 'shape': [String, "shape"], + 'expand': [String, "expand"], + 'active': [Boolean, "active"], + 'onPopFocus': [Function], + 'onPopBlur': [Function] + } +}); + + +export const PopCard = /*@__PURE__*/ globalThis.window ? defineContainer('pop-card', definePopCard, [ 'compact' -]); - - -export const PopCardActions = /*@__PURE__*/ defineContainer('pop-card-actions', definePopCardActions); - - -export const PopCardBody = /*@__PURE__*/ defineContainer('pop-card-body', definePopCardBody); - - -export const PopCardTitle = /*@__PURE__*/ defineContainer('pop-card-title', definePopCardTitle); - - -export const PopCheckbox = /*@__PURE__*/ defineContainer('pop-checkbox', definePopCheckbox, [ +]) : defineStencilSSRComponent({ + tagName: 'pop-card', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'compact': [Boolean, "compact"] + } +}); + + +export const PopCardActions = /*@__PURE__*/ globalThis.window ? defineContainer('pop-card-actions', definePopCardActions) : defineStencilSSRComponent({ + tagName: 'pop-card-actions', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + + } +}); + + +export const PopCardBody = /*@__PURE__*/ globalThis.window ? defineContainer('pop-card-body', definePopCardBody) : defineStencilSSRComponent({ + tagName: 'pop-card-body', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + + } +}); + + +export const PopCardTitle = /*@__PURE__*/ globalThis.window ? defineContainer('pop-card-title', definePopCardTitle) : defineStencilSSRComponent({ + tagName: 'pop-card-title', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + + } +}); + + +export const PopCheckbox = /*@__PURE__*/ globalThis.window ? defineContainer('pop-checkbox', definePopCheckbox, [ 'name', 'value', 'required', @@ -119,27 +194,64 @@ export const PopCheckbox = /*@__PURE__*/ defineContainer('pop-divider', definePopDivider, [ +'checked', 'pop-change') : defineStencilSSRComponent({ + tagName: 'pop-checkbox', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'name': [String, "name"], + 'value': [String, "value"], + 'required': [Boolean, "required"], + 'readonly': [Boolean, "readonly"], + 'checked': [Boolean, "checked"], + 'indeterminate': [Boolean, "indeterminate"], + 'disabled': [Boolean, "disabled"], + 'color': [String, "color"], + 'size': [String, "size"], + 'placement': [String, "placement"], + 'onPopChange': [Function], + 'onPopFocus': [Function], + 'onPopBlur': [Function] + } +}); + + +export const PopDivider = /*@__PURE__*/ globalThis.window ? defineContainer('pop-divider', definePopDivider, [ 'orientation', 'placement', 'color' -]); - - -export const PopDrawer = /*@__PURE__*/ defineContainer('pop-drawer', definePopDrawer, [ +]) : defineStencilSSRComponent({ + tagName: 'pop-divider', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'orientation': [String, "orientation"], + 'placement': [String, "placement"], + 'color': [String, "color"] + } +}); + + +export const PopDrawer = /*@__PURE__*/ globalThis.window ? defineContainer('pop-drawer', definePopDrawer, [ 'trigger', 'triggerAction', 'side', 'open', 'popDidPresent', 'popDidDismiss' -]); - - -export const PopDropdown = /*@__PURE__*/ defineContainer('pop-dropdown', definePopDropdown, [ +]) : defineStencilSSRComponent({ + tagName: 'pop-drawer', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'trigger': [String, "trigger"], + 'triggerAction': [String, "trigger-action"], + 'side': [String, "side"], + 'open': [Boolean, "open"], + 'onPopDidPresent': [Function], + 'onPopDidDismiss': [Function] + } +}); + + +export const PopDropdown = /*@__PURE__*/ globalThis.window ? defineContainer('pop-dropdown', definePopDropdown, [ 'side', 'align', 'open', @@ -148,25 +260,55 @@ export const PopDropdown = /*@__PURE__*/ defineContainer('pop-d 'showBackdrop', 'didPresent', 'didDismiss' -]); - - -export const PopImg = /*@__PURE__*/ defineContainer('pop-img', definePopImg, [ +]) : defineStencilSSRComponent({ + tagName: 'pop-dropdown', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'side': [String, "side"], + 'align': [String, "align"], + 'open': [Boolean, "open"], + 'triggerAction': [String, "trigger-action"], + 'debounce': [Number, "debounce"], + 'showBackdrop': [Boolean, "show-backdrop"], + 'onDidPresent': [Function], + 'onDidDismiss': [Function] + } +}); + + +export const PopImg = /*@__PURE__*/ globalThis.window ? defineContainer('pop-img', definePopImg, [ 'src', 'alt', 'popWillLoad', 'popDidLoad', 'popError' -]); - - -export const PopIndicator = /*@__PURE__*/ defineContainer('pop-indicator', definePopIndicator, [ +]) : defineStencilSSRComponent({ + tagName: 'pop-img', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'src': [String, "src"], + 'alt': [String, "alt"], + 'onPopWillLoad': [Function], + 'onPopDidLoad': [Function], + 'onPopError': [Function] + } +}); + + +export const PopIndicator = /*@__PURE__*/ globalThis.window ? defineContainer('pop-indicator', definePopIndicator, [ 'side', 'position' -]); +]) : defineStencilSSRComponent({ + tagName: 'pop-indicator', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'side': [String, "side"], + 'position': [String, "position"] + } +}); -export const PopInput = /*@__PURE__*/ defineContainer('pop-input', definePopInput, [ +export const PopInput = /*@__PURE__*/ globalThis.window ? defineContainer('pop-input', definePopInput, [ 'name', 'type', 'placeholder', @@ -200,10 +342,44 @@ export const PopInput = /*@__PURE__*/ defineContainer('pop-input-file', definePopInputFile, [ +'value', 'pop-input') : defineStencilSSRComponent({ + tagName: 'pop-input', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'name': [String, "name"], + 'type': [String, "type"], + 'placeholder': [String, "placeholder"], + 'min': [Number, "min"], + 'step': [String, "step"], + 'minLength': [Number, "min-length"], + 'maxLength': [Number, "max-length"], + 'multiple': [Boolean, "multiple"], + 'pattern': [String, "pattern"], + 'required': [Boolean, "required"], + 'readonly': [Boolean, "readonly"], + 'disabled': [Boolean, "disabled"], + 'autoFocus': [Boolean, "auto-focus"], + 'keyboard': [String, "keyboard"], + 'enterkeyhint': [String, "enterkeyhint"], + 'spellcheck': [Boolean, "spellcheck"], + 'autoComplete': [String, "auto-complete"], + 'autoCapitalize': [String, "auto-capitalize"], + 'bordered': [Boolean, "bordered"], + 'color': [String, "color"], + 'size': [String, "size"], + 'helperText': [String, "helper-text"], + 'errorText': [String, "error-text"], + 'counter': [Boolean, "counter"], + 'debounce': [Number, "debounce"], + 'onPopChange': [Function], + 'onPopInput': [Function], + 'onPopFocus': [Function], + 'onPopBlur': [Function] + } +}); + + +export const PopInputFile = /*@__PURE__*/ globalThis.window ? defineContainer('pop-input-file', definePopInputFile, [ 'name', 'value', 'multiple', @@ -219,42 +395,99 @@ export const PopInputFile = /*@__PURE__*/ defineContainer('pop 'popChange', 'popFocus', 'popBlur' -]); - - -export const PopItem = /*@__PURE__*/ defineContainer('pop-item', definePopItem, [ +]) : defineStencilSSRComponent({ + tagName: 'pop-input-file', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'name': [String, "name"], + 'multiple': [Boolean, "multiple"], + 'required': [Boolean, "required"], + 'readonly': [Boolean, "readonly"], + 'disabled': [Boolean, "disabled"], + 'autoFocus': [Boolean, "auto-focus"], + 'bordered': [Boolean, "bordered"], + 'color': [String, "color"], + 'size': [String, "size"], + 'helperText': [String, "helper-text"], + 'errorText': [String, "error-text"], + 'onPopChange': [Function], + 'onPopFocus': [Function], + 'onPopBlur': [Function] + } +}); + + +export const PopItem = /*@__PURE__*/ globalThis.window ? defineContainer('pop-item', definePopItem, [ 'disabled' -]); +]) : defineStencilSSRComponent({ + tagName: 'pop-item', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'disabled': [Boolean, "disabled"] + } +}); -export const PopJoin = /*@__PURE__*/ defineContainer('pop-join', definePopJoin, [ +export const PopJoin = /*@__PURE__*/ globalThis.window ? defineContainer('pop-join', definePopJoin, [ 'orientation' -]); +]) : defineStencilSSRComponent({ + tagName: 'pop-join', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'orientation': [String, "orientation"] + } +}); -export const PopKbd = /*@__PURE__*/ defineContainer('pop-kbd', definePopKbd, [ +export const PopKbd = /*@__PURE__*/ globalThis.window ? defineContainer('pop-kbd', definePopKbd, [ 'size' -]); +]) : defineStencilSSRComponent({ + tagName: 'pop-kbd', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'size': [String, "size"] + } +}); -export const PopList = /*@__PURE__*/ defineContainer('pop-list', definePopList, [ +export const PopList = /*@__PURE__*/ globalThis.window ? defineContainer('pop-list', definePopList, [ 'size', 'orientation' -]); +]) : defineStencilSSRComponent({ + tagName: 'pop-list', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'size': [String, "size"], + 'orientation': [String, "orientation"] + } +}); -export const PopLoading = /*@__PURE__*/ defineContainer('pop-loading', definePopLoading, [ +export const PopLoading = /*@__PURE__*/ globalThis.window ? defineContainer('pop-loading', definePopLoading, [ 'type', 'size' -]); +]) : defineStencilSSRComponent({ + tagName: 'pop-loading', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'type': [String, "type"], + 'size': [String, "size"] + } +}); -export const PopMask = /*@__PURE__*/ defineContainer('pop-mask', definePopMask, [ +export const PopMask = /*@__PURE__*/ globalThis.window ? defineContainer('pop-mask', definePopMask, [ 'type' -]); +]) : defineStencilSSRComponent({ + tagName: 'pop-mask', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'type': [String, "type"] + } +}); -export const PopModal = /*@__PURE__*/ defineContainer('pop-modal', definePopModal, [ +export const PopModal = /*@__PURE__*/ globalThis.window ? defineContainer('pop-modal', definePopModal, [ 'trigger', 'component', 'componentProps', @@ -263,13 +496,31 @@ export const PopModal = /*@__PURE__*/ defineContainer('pop-modal', 'open', 'didPresent', 'didDismiss' -]); - - -export const PopNavbar = /*@__PURE__*/ defineContainer('pop-navbar', definePopNavbar); - - -export const PopPopover = /*@__PURE__*/ defineContainer('pop-popover', definePopPopover, [ +]) : defineStencilSSRComponent({ + tagName: 'pop-modal', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'trigger': [String, "trigger"], + 'component': [String, "component"], + 'showBackdrop': [Boolean, "show-backdrop"], + 'backdropDismiss': [Boolean, "backdrop-dismiss"], + 'open': [Boolean, "open"], + 'onDidPresent': [Function], + 'onDidDismiss': [Function] + } +}); + + +export const PopNavbar = /*@__PURE__*/ globalThis.window ? defineContainer('pop-navbar', definePopNavbar) : defineStencilSSRComponent({ + tagName: 'pop-navbar', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + + } +}); + + +export const PopPopover = /*@__PURE__*/ globalThis.window ? defineContainer('pop-popover', definePopPopover, [ 'open', 'animated', 'showBackdrop', @@ -283,17 +534,40 @@ export const PopPopover = /*@__PURE__*/ defineContainer('pop-pop 'didPresent', 'willDismiss', 'didDismiss' -]); - - -export const PopProgress = /*@__PURE__*/ defineContainer('pop-progress', definePopProgress, [ +]) : defineStencilSSRComponent({ + tagName: 'pop-popover', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'open': [Boolean, "open"], + 'showBackdrop': [Boolean, "show-backdrop"], + 'backdropDismiss': [Boolean, "backdrop-dismiss"], + 'trigger': [String, "trigger"], + 'triggerAction': [String, "trigger-action"], + 'component': [String, "component"], + 'onWillPresent': [Function], + 'onDidPresent': [Function], + 'onWillDismiss': [Function], + 'onDidDismiss': [Function] + } +}); + + +export const PopProgress = /*@__PURE__*/ globalThis.window ? defineContainer('pop-progress', definePopProgress, [ 'value', 'max', 'color' -]); - - -export const PopRadio = /*@__PURE__*/ defineContainer('pop-radio', definePopRadio, [ +]) : defineStencilSSRComponent({ + tagName: 'pop-progress', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'value': [Number, "value"], + 'max': [Number, "max"], + 'color': [String, "color"] + } +}); + + +export const PopRadio = /*@__PURE__*/ globalThis.window ? defineContainer('pop-radio', definePopRadio, [ 'name', 'value', 'checked', @@ -305,10 +579,24 @@ export const PopRadio = /*@__PURE__*/ defineContainer('pop-radio-group', definePopRadioGroup, [ +'value', 'pop-change') : defineStencilSSRComponent({ + tagName: 'pop-radio', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'name': [String, "name"], + 'checked': [Boolean, "checked"], + 'required': [Boolean, "required"], + 'disabled': [Boolean, "disabled"], + 'autoFocus': [Boolean, "auto-focus"], + 'color': [String, "color"], + 'size': [String, "size"], + 'onPopFocus': [Function], + 'onPopBlur': [Function] + } +}); + + +export const PopRadioGroup = /*@__PURE__*/ globalThis.window ? defineContainer('pop-radio-group', definePopRadioGroup, [ 'name', 'value', 'required', @@ -320,10 +608,24 @@ export const PopRadioGroup = /*@__PURE__*/ defineContainer('pop-range', definePopRange, [ +'value', 'pop-change') : defineStencilSSRComponent({ + tagName: 'pop-radio-group', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'name': [String, "name"], + 'required': [Boolean, "required"], + 'disabled': [Boolean, "disabled"], + 'allowEmpty': [Boolean, "allow-empty"], + 'compare': [String, "compare"], + 'color': [String, "color"], + 'size': [String, "size"], + 'onPopChange': [Function], + 'onPopValueChange': [Function] + } +}); + + +export const PopRange = /*@__PURE__*/ globalThis.window ? defineContainer('pop-range', definePopRange, [ 'name', 'value', 'min', @@ -339,10 +641,29 @@ export const PopRange = /*@__PURE__*/ defineContainer('pop-select', definePopSelect, [ +'value', 'pop-change') : defineStencilSSRComponent({ + tagName: 'pop-range', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'name': [String, "name"], + 'value': [Number, "value"], + 'min': [Number, "min"], + 'max': [Number, "max"], + 'step': [Number, "step"], + 'required': [Boolean, "required"], + 'disabled': [Boolean, "disabled"], + 'autoFocus': [Boolean, "auto-focus"], + 'color': [String, "color"], + 'size': [String, "size"], + 'debounce': [Number, "debounce"], + 'onPopChange': [Function], + 'onPopFocus': [Function], + 'onPopBlur': [Function] + } +}); + + +export const PopSelect = /*@__PURE__*/ globalThis.window ? defineContainer('pop-select', definePopSelect, [ 'name', 'placeholder', 'value', @@ -365,26 +686,67 @@ export const PopSelect = /*@__PURE__*/ defineContainer('pop-select-option', definePopSelectOption, [ +'value', 'pop-change') : defineStencilSSRComponent({ + tagName: 'pop-select', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'name': [String, "name"], + 'placeholder': [String, "placeholder"], + 'multiple': [Boolean, "multiple"], + 'min': [Number, "min"], + 'max': [Number, "max"], + 'required': [Boolean, "required"], + 'disabled': [Boolean, "disabled"], + 'autoFocus': [Boolean, "auto-focus"], + 'bordered': [Boolean, "bordered"], + 'color': [String, "color"], + 'size': [String, "size"], + 'selectedText': [String, "selected-text"], + 'helperText': [String, "helper-text"], + 'notEnoughErrorText': [String, "not-enough-error-text"], + 'tooManyErrorText': [String, "too-many-error-text"], + 'compare': [String, "compare"], + 'onPopDismiss': [Function], + 'onPopChange': [Function], + 'onPopFocus': [Function], + 'onPopBlur': [Function] + } +}); + + +export const PopSelectOption = /*@__PURE__*/ globalThis.window ? defineContainer('pop-select-option', definePopSelectOption, [ 'value', 'disabled', 'color', 'size' -]); - - -export const PopSwap = /*@__PURE__*/ defineContainer('pop-swap', definePopSwap, [ +]) : defineStencilSSRComponent({ + tagName: 'pop-select-option', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'disabled': [Boolean, "disabled"], + 'color': [String, "color"], + 'size': [String, "size"] + } +}); + + +export const PopSwap = /*@__PURE__*/ globalThis.window ? defineContainer('pop-swap', definePopSwap, [ 'type', 'active', 'popSwap' ], -'active', 'pop-change'); - - -export const PopTextarea = /*@__PURE__*/ defineContainer('pop-textarea', definePopTextarea, [ +'active', 'pop-change') : defineStencilSSRComponent({ + tagName: 'pop-swap', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'type': [String, "type"], + 'active': [Boolean, "active"], + 'onPopSwap': [Function] + } +}); + + +export const PopTextarea = /*@__PURE__*/ globalThis.window ? defineContainer('pop-textarea', definePopTextarea, [ 'name', 'placeholder', 'value', @@ -414,10 +776,42 @@ export const PopTextarea = /*@__PURE__*/ defineContainer('pop-toggle', definePopToggle, [ +'value', 'pop-input') : defineStencilSSRComponent({ + tagName: 'pop-textarea', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'name': [String, "name"], + 'placeholder': [String, "placeholder"], + 'value': [String, "value"], + 'minLength': [Number, "min-length"], + 'maxLength': [Number, "max-length"], + 'cols': [Number, "cols"], + 'rows': [Number, "rows"], + 'required': [Boolean, "required"], + 'readonly': [Boolean, "readonly"], + 'disabled': [Boolean, "disabled"], + 'autoFocus': [Boolean, "auto-focus"], + 'keyboard': [String, "keyboard"], + 'enterkeyhint': [String, "enterkeyhint"], + 'spellcheck': [Boolean, "spellcheck"], + 'autoCapitalize': [String, "auto-capitalize"], + 'wrap': [String, "wrap"], + 'bordered': [Boolean, "bordered"], + 'color': [String, "color"], + 'size': [String, "size"], + 'helperText': [String, "helper-text"], + 'errorText': [String, "error-text"], + 'counter': [Boolean, "counter"], + 'debounce': [Number, "debounce"], + 'onPopChange': [Function], + 'onPopInput': [Function], + 'onPopFocus': [Function], + 'onPopBlur': [Function] + } +}); + + +export const PopToggle = /*@__PURE__*/ globalThis.window ? defineContainer('pop-toggle', definePopToggle, [ 'name', 'value', 'required', @@ -431,13 +825,39 @@ export const PopToggle = /*@__PURE__*/ defineContainer('pop-tooltip', definePopTooltip, [ +'checked', 'pop-change') : defineStencilSSRComponent({ + tagName: 'pop-toggle', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'name': [String, "name"], + 'value': [String, "value"], + 'required': [Boolean, "required"], + 'readonly': [Boolean, "readonly"], + 'checked': [Boolean, "checked"], + 'indeterminate': [Boolean, "indeterminate"], + 'disabled': [Boolean, "disabled"], + 'color': [String, "color"], + 'size': [String, "size"], + 'onPopChange': [Function], + 'onPopFocus': [Function], + 'onPopBlur': [Function] + } +}); + + +export const PopTooltip = /*@__PURE__*/ globalThis.window ? defineContainer('pop-tooltip', definePopTooltip, [ 'value', 'color', 'position', 'open' -]); +]) : defineStencilSSRComponent({ + tagName: 'pop-tooltip', + hydrateModule: import('@poppy-ui/core/hydrate'), + props: { + 'value': [String, "value"], + 'color': [String, "color"], + 'position': [String, "position"], + 'open': [Boolean, "open"] + } +}); diff --git a/packages/vue/src/vue-component-lib/utils.ts b/packages/vue/src/vue-component-lib/utils.ts deleted file mode 100644 index 0d99b66..0000000 --- a/packages/vue/src/vue-component-lib/utils.ts +++ /dev/null @@ -1,236 +0,0 @@ -// @ts-nocheck -// It's easier and safer for Volar to disable typechecking and let the return type inference do its job. -import { defineComponent, getCurrentInstance, h, inject, ref, Ref, withDirectives } from 'vue'; - -export interface InputProps { - modelValue?: T; -} - -const UPDATE_VALUE_EVENT = 'update:modelValue'; -const MODEL_VALUE = 'modelValue'; -const ROUTER_LINK_VALUE = 'routerLink'; -const NAV_MANAGER = 'navManager'; -const ROUTER_PROP_PREFIX = 'router'; -const ARIA_PROP_PREFIX = 'aria'; -/** - * Starting in Vue 3.1.0, all properties are - * added as keys to the props object, even if - * they are not being used. In order to correctly - * account for both value props and v-model props, - * we need to check if the key exists for Vue <3.1.0 - * and then check if it is not undefined for Vue >= 3.1.0. - * See https://github.com/vuejs/vue-next/issues/3889 - */ -const EMPTY_PROP = Symbol(); -const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP }; - -interface NavManager { - navigate: (options: T) => void; -} - -const getComponentClasses = (classes: unknown) => { - return (classes as string)?.split(' ') || []; -}; - -const getElementClasses = ( - ref: Ref, - componentClasses: Set, - defaultClasses: string[] = [] -) => { - return [...Array.from(ref.value?.classList || []), ...defaultClasses].filter( - (c: string, i, self) => !componentClasses.has(c) && self.indexOf(c) === i - ); -}; - -/** - * Create a callback to define a Vue component wrapper around a Web Component. - * - * @prop name - The component tag name (i.e. `ion-button`) - * @prop componentProps - An array of properties on the - * component. These usually match up with the @Prop definitions - * in each component's TSX file. - * @prop customElement - An option custom element instance to pass - * to customElements.define. Only set if `includeImportCustomElements: true` in your config. - * @prop modelProp - The prop that v-model binds to (i.e. value) - * @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange) - */ -export const defineContainer = ( - name: string, - defineCustomElement: any, - componentProps: string[] = [], - modelProp?: string, - modelUpdateEvent?: string -) => { - /** - * Create a Vue component wrapper around a Web Component. - * Note: The `props` here are not all properties on a component. - * They refer to whatever properties are set on an instance of a component. - */ - - if (defineCustomElement !== undefined) { - defineCustomElement(); - } - - const Container = defineComponent>((props, { attrs, slots, emit }) => { - let modelPropValue = props[modelProp]; - const containerRef = ref(); - const classes = new Set(getComponentClasses(attrs.class)); - - /** - * This directive is responsible for updating any reactive - * reference associated with v-model on the component. - * This code must be run inside of the "created" callback. - * Since the following listener callbacks as well as any potential - * event callback defined in the developer's app are set on - * the same element, we need to make sure the following callbacks - * are set first so they fire first. If the developer's callback fires first - * then the reactive reference will not have been updated yet. - */ - const vModelDirective = { - created: (el: HTMLElement) => { - const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent]; - eventsNames.forEach((eventName: string) => { - el.addEventListener(eventName.toLowerCase(), (e: Event) => { - /** - * Only update the v-model binding if the event's target is the element we are - * listening on. For example, Component A could emit ionChange, but it could also - * have a descendant Component B that also emits ionChange. We only want to update - * the v-model for Component A when ionChange originates from that element and not - * when ionChange bubbles up from Component B. - */ - if (e.target.tagName === el.tagName) { - modelPropValue = (e?.target as any)[modelProp]; - emit(UPDATE_VALUE_EVENT, modelPropValue); - } - }); - }); - }, - }; - - const currentInstance = getCurrentInstance(); - const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER]; - const navManager: NavManager | undefined = hasRouter ? inject(NAV_MANAGER) : undefined; - const handleRouterLink = (ev: Event) => { - const { routerLink } = props; - if (routerLink === EMPTY_PROP) return; - - if (navManager !== undefined) { - /** - * This prevents the browser from - * performing a page reload when pressing - * an Ionic component with routerLink. - * The page reload interferes with routing - * and causes ion-back-button to disappear - * since the local history is wiped on reload. - */ - ev.preventDefault(); - - let navigationPayload: any = { event: ev }; - for (const key in props) { - const value = props[key]; - if (props.hasOwnProperty(key) && key.startsWith(ROUTER_PROP_PREFIX) && value !== EMPTY_PROP) { - navigationPayload[key] = value; - } - } - - navManager.navigate(navigationPayload); - } else { - console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.'); - } - }; - - return () => { - modelPropValue = props[modelProp]; - - getComponentClasses(attrs.class).forEach((value) => { - classes.add(value); - }); - - const oldClick = props.onClick; - const handleClick = (ev: Event) => { - if (oldClick !== undefined) { - oldClick(ev); - } - if (!ev.defaultPrevented) { - handleRouterLink(ev); - } - }; - - let propsToAdd: any = { - ref: containerRef, - class: getElementClasses(containerRef, classes), - onClick: handleClick, - }; - - /** - * We can use Object.entries here - * to avoid the hasOwnProperty check, - * but that would require 2 iterations - * where as this only requires 1. - */ - for (const key in props) { - const value = props[key]; - if ((props.hasOwnProperty(key) && value !== EMPTY_PROP) || key.startsWith(ARIA_PROP_PREFIX)) { - propsToAdd[key] = value; - } - } - - if (modelProp) { - /** - * If form value property was set using v-model - * then we should use that value. - * Otherwise, check to see if form value property - * was set as a static value (i.e. no v-model). - */ - if (props[MODEL_VALUE] !== EMPTY_PROP) { - propsToAdd = { - ...propsToAdd, - [modelProp]: props[MODEL_VALUE], - }; - } else if (modelPropValue !== EMPTY_PROP) { - propsToAdd = { - ...propsToAdd, - [modelProp]: modelPropValue, - }; - } - } - - // If router link is defined, add href to props - // in order to properly render an anchor tag inside - // of components that should become activatable and - // focusable with router link. - if (props[ROUTER_LINK_VALUE] !== EMPTY_PROP) { - propsToAdd = { - ...propsToAdd, - href: props[ROUTER_LINK_VALUE], - }; - } - - /** - * vModelDirective is only needed on components that support v-model. - * As a result, we conditionally call withDirectives with v-model components. - */ - const node = h(name, propsToAdd, slots.default && slots.default()); - return modelProp === undefined ? node : withDirectives(node, [[vModelDirective]]); - }; - }); - - if (typeof Container !== 'function') { - Container.name = name; - - Container.props = { - [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP, - }; - - componentProps.forEach((componentProp) => { - Container.props[componentProp] = DEFAULT_EMPTY_PROP; - }); - - if (modelProp) { - Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP; - Container.emits = [UPDATE_VALUE_EVENT]; - } - } - - return Container; -};